When using the src attribute of the img tag and the background-image style, the image set by the src attribute will overlap the one set by the background-image style. To address this issue, make sure to follow these steps:
View Demo
HTML:
<ul id="recherche">
<li><a href="#"><img id="glo" src="#" alt=""/></a></li>
<li><a href="#">Glossaire</a></li>
</ul>
CSS:
ul:hover #glo{
background-image:url(../images/glosaire_on.jpg) ;
}
ul:hover a{ color: teal;}
ul #glo{
width: 300px;
height: 200px;
background-image:url(../images/glosaire_off.jpg) ;
}
ul a{ color: green;}
Remember, specify the width and height for the img element.
UPDATE:
To apply hover effects to pairs of 2 li elements together, wrap them within separate ul elements like this:
<ul id="recherche">
<li id="glo"><a href="#"></br></a></li>
<li><a href="#">Glossaire</a></li>
</ul>
<ul>
<li id="rech"><a href="#"></br></a></li>
<li><a href="#">Recherche</a></li>
</ul>
Updated Code Demonstration
Make sure to adjust the CSS to target the correct elements.
CSS:
ul {
width: 300px;
}
ul:hover li:first-child {
background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-2.jpg);
}
ul:hover li:first-child + li a {
color: teal;
}
ul li:first-child {
width: 300px;
height: 200px;
background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-1.jpg);
}
ul li:first-child + li a {
color: green;
}
The use of first-child selector and sibling selector (+) in CSS helps in targeting the appropriate elements accurately.