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


Tags: html,css

Problem :

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


Solution :

Use the hover css pseudoclass

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

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

    CSS Howto..

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    jQuery/CSS - How to style the first occurrence of an element inside of another element?

    How to position these images in CSS?

    how can i force all rows in a table to have the same height

    How can I add some css to center certain divs if they are using the same css style? [duplicate]

    How to make text and icons black in sticky header?

    How do I customise the style of the Auth0 lock control?

    CSS: How to set the width and height dependent on the screen/window size?

    CSS how to solve -webkit- functions

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    Since KB2898785 IE6 doesn't load locally-sourced CSS for a page delivered remotely--how to correct?

    CSS: how to have reposition relative to a centered background image

    How do I stop this div's width from decreasing?

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    How to set CSS3 transition using javascript?

    How can I have columns like this in CSS? (image)

    How to align text within a div

    Hiding and showing elements with their respective styles in Javascript

    How to separate Text and HTML with CSS

    How can I center this textbox using CSS?

    How to get variable`s value of CSS from database in yii?

    How to change an input button with pure css button (no images)? [duplicate]

    How to Add flexibility to SASS for another color

    How to edit a div inside PHP using CSS

    Jquery Show Hide with attribute

    How to target table with ID?

    How to vertically center text next to a radio button

    How to create a dotted shadowy effect on an image with CSS?

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    How to add space to left-right of the Web-Page using HTML/CSS