Question

I wanted to have my text change on a mouseover event. I have found a working solution on stackoverflow which can be found here. Credits go out to Mark for this solution.

However in my situation, I have a whole section of links where I would like to implement this solution, but I run into an undesired side effect. When I hover over the text I want replaced on the mouseover event, it affects all links at the same time, and not just the one which I am hovering over. I want the mouseover effect to work ONLY on the link that I am hovering over with the mouse. Unfortunately all the links are within the same ul li so I am not sure if a solution would be to open and close the <div> between every <li> </li> over and over again.

Below is the css snippet that I used from Mark

div#line1 span#a {
    display:inline;
}
div#line1:hover span#a {
    display:none;
}
div#line1 span#b {
    display:none;
}
div#line1:hover span#b {
    display:inline;
}

and the part in my html is:

      <div id="line1">
         <ul>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
            <li><a href="#"><span id="a">text 1</span><span id="b">text 2</span></a></li>
          </ul> 

Answer 1

First of all in the spans you have shared IDs, so change id for class there and in the CSS instead of using # use the class marker .

Appart of this you’re applying the hover to the id line, so all the div is affected. The :hover should be applied just to the element “a” or “b” or the “li” where the effect is desired.

Try this CSS just replacing at the HTML id for class inside the spans:

li span.a{
  display: inline;
}

li span.b{
  display: none;
}

li:hover span.a{
 display: none;
}

li:hover span.b{
 display: inline;
}

DEMO: http://jsfiddle.net/Kn7YY/1/