Question

我希望“标签”标签在鼠标悬停时与“搜索”标签具有相同的背景，我该怎么做？

我的搜索标签已经有一个背景作为默认设置，但是当点击标签时，我如何才能获得搜索后出现在标签后面的相同背景？

HTML：

<html>
<head>

<link href="arg.css" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>

</body> 
</html>

CSS：

.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
   padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}

.tab-mouseover {
background: #bdbdbd;
}

.tab-selected {
background: #c0c0c0; 
}

Answer 1

使用hover css伪类

http://jsfiddle.net/mrtsherman/7FvR5/

tab-item:hover {     background: #c0c0c0;  }

Answer 2

由于我的低代表无法添加评论，但我想说现在你正在做的只是创建一个名为＆＃34; tab-mouseover＆＃34;它的背景是#bdbdbd。如果将此类应用于元素，则它将具有#bdbdbd的背景。它实际上并不意味着当你将鼠标移开时会改变颜色。

请注意，类的名称可以是任何内容。但是，为了达到你想要的效果，你需要做mrtsherman提到的事情（除了将背景颜色改为：＆＃34; #bdbdbd＆＃34;）。

当鼠标移过选定的选项卡时需要更改背景。怎么样？

2 个答案: