在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用的链接式控制。。。。。。。。 展开
TableDI
2024-07-18 广告
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时，背景从红色变为棕色。 效果如下。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
已赞过
已踩过<
下面实例操作下，以<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里用空格表示子元素，不空格就表示修饰对应元素。
