html - 当鼠标经过所选选项卡时需要更改背景。如何?

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

最佳答案

使用 hover css 伪类

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

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

关于html - 当鼠标经过所选选项卡时需要更改背景。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7730897/

相关文章:

javascript - 表格列 : width, 最小宽度,自动换行和列 "importance"

css - .ui-layout-north 背景色

html - 为什么这个菜单在 Chrome 中会移动?

html - 如何在 html/css 中定位适合移动浏览器的图像

javascript - 排序 Jquery 返回的 HTML 元素

javascript - 用于 null 与未定义的 InnerHTML

javascript - 两个 div 之间共享的单个 onclick 函数未获取正确的值

jquery - 如何使用 Jquery 对图像进行平滑的自动放大?

vertical-alignment - 请帮助理解 line-height 和 vertical-align CSS 2.1 属性

html - 移动媒体查询