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

时间:2011-10-11 18:44:11

标签: html css

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

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

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; 
}

2 个答案:

答案 0 :(得分:3)

使用hover css伪类

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

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

答案 1 :(得分:3)

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

请注意,类的名称可以是任何内容。但是,为了达到你想要的效果,你需要做mrtsherman提到的事情(除了将背景颜色改为:&#34; #bdbdbd&#34;)。