Need the background to change when the mouse goes over the selected tab. How?_问答_开发者

Need the background to change when the mouse goes over the selected tab. How?

开发者 https://www.devze.com 2023-04-12 13:03 出处：网络

I want the Tags tab to have the same background as the Search tab when the mouse is over it, how do I do this?

相关专题：css

I want the Tags tab to have the same background as the Search tab when the mouse is over it, how do I do this?

I have the search tab already with a background as a default but when going to click on Tags how can I get the same background that is on Search to appear behind Tags?

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"&g开发者_StackOverflow社区t;
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; 
}

Use the hover css pseudoclass

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

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

unable to add a comment due to my low rep, but i wanted to say that right now what you're doing is just creating a class named "tab-mouseover" which has a background of #bdbdbd. If you apply this class to an element, it will just have a background of #bdbdbd. It doesn't actually mean it will change colors when you mouse over.

Please note that names of classes can be anything. However, in order to achieve the effect you want, you need to do what mrtsherman mentioned (except change the background color to: "#bdbdbd").