在CSS中如何设置一个按钮鼠标划过变颜色。
<form name=search_js1 method=post action='[!--news.url--]e/search/index.php' >
<input name=keyboard type=text onmouseover="this.style.border='solid 1px #3CBD38'" onmouseout="this.style.border='solid 1px #DFDFDF'"/><!--搜索框-->
<DIV="anniu">
<input type=submit name=Submit value=搜索按钮 class="style1" onmouseover="this.className='style2'" onmouseout="this.className='style1'"/></div><!--搜索按钮-->
</form></div>
在CSS中定义按钮是:.anniu input{。。。。}, 如何引入style1,或style2的样式。我试了一下:
.anniu input style1{。。。。} ,.anniu input style2{。。。。} 不行啊,到底要如何引入。
html与CSS用的链接式控制。。。。。。。。 展开
2022-12-01 · 百度认证:北京惠企网络技术有限公司官方账号
1、首先我们选择鼠标单击创建一个新的html文件。
2、在html文件中找到body标签,在此标签中创建div标签并将类类设置为bg。数字:代码:<div class =“bg”> </ div>
3、在title标签后面创建一个样式标签,以便为bg类添加样式。在这里设置bg类的宽度,高度和背景颜色。
<style type =“text / css”>
.bg {
宽度:150px;
高度:150px;
背景颜色:红色;
}
</样式>
4、当鼠标滑过div时设置背景颜色。在bg样式类上添加鼠标:悬停,然后在鼠标滚动时设置背景颜色。
.bg:悬停{
背景颜色:宝石;
}
5、实用程序浏览器打开保存html后,使用浏览器打开它。当鼠标不在div上时,背景为红色。
6、当鼠标滚过div时,背景从红色变为棕色。 效果如下。
下面实例操作下,以<li>为例,原理都是一样。
具体操作步骤如下:
先定义CSS
li a:link {color: #FF0000} /* 初始状态为红色 */
li a:hover {color: #00FF00} /* 鼠标划过显示绿色 */
2.在<body>与</body>之间写入
......
<ul>
<li><a href="#">沃优尔</a></li>
<li><a href="#">沃优尔</a></li>
<li><a href="#">沃优尔</a></li>
<li><a href="#">沃优尔</a></li>
<li><a href="#">沃优尔</a></li>
</ul>
.......
3查看效果;鼠标未划过状态;
4.鼠标滑过状态;
按你的思路帮你改好了,如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.anniu input.style1{
background-color: #99FF99;
}
.anniu input.style2{
background-color: #FF9999;
}
</style>
</head>
<body>
<DIV="search">
<form name=search_js1 method=post action='[!--news.url--]e/search/index.php' >
<input name=keyboard type=text onmouseover="this.style.border='solid 1px #3CBD38'" onmouseout="this.style.border='solid 1px #DFDFDF'"/><!--搜索框-->
<DIV class="anniu">
<input type=submit name=Submit value=搜索按钮 class="style1" onmouseover="this.className='style2'" onmouseout="this.className='style1'"/>
</div><!--搜索按钮-->
</form>
</div>
</body>
</html>
你原来的内容里有两个错误:
1,anniu那个div你写成了<DIV="anniu">,应该是<DIV class="anniu">
2,CSS里用.anniu input.style1来引用,前面那个有个空格,后面没有空格(input和.style之间),CSS里用空格表示子元素,不空格就表示修饰对应元素。