undesired side effect with a mousover event
===

First off I would like to thank the stackoverflow community for what they are doing here. Its totally priceless. Thank you all.

I wanted to have my text change on a mouseover event. I have found a working solution on stackoverflow which can be found here: <http://stackoverflow.com/a/8860172/1531127>! Credits go out to <a href="http://stackoverflow.com/users/929722/mark">Mark</a> 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 <a href="http://stackoverflow.com/users/929722/mark">Mark</a>.

    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> 
 </div>


Any help would be appreciated.

Cheers :)