1

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>

Cœur
  • 37,241
  • 25
  • 195
  • 267
Instronics
  • 79
  • 3
  • 6

2 Answers2

3

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/

Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51
Nuxy
  • 386
  • 1
  • 2
  • 17
  • Surely this will affect all spans at the same time and not treat them as individuals? – Billy Moat Jul 24 '12 at 11:11
  • 1
    @Billy Moat: There you have the demo. – Nuxy Jul 24 '12 at 11:16
  • I love this solution. Thank you very much for your insight here. I guess I learned a valuable lesson about "id" vs. "class" today. I will be using this solution for my problem. Thank you. – Instronics Jul 24 '12 at 11:25
1

What about this solution

Some tweaks in your mark-up:

HTML:

<div>
    <ul>
        <li id="line1"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line2"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line3"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line4"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
        <li id="line5"><a href="#"><span class="a">text 1</span><span class="b">text 2</span></a></li>
    </ul> 
</div>

CSS:

#line1 span.a, 
#line2 span.a,
#line3 span.a
#line4 span.a
#line5 span.a {
    display:inline;
}

#line1:hover span.a,
#line2:hover span.a,
#line3:hover span.a,
#line4:hover span.a,
#line5:hover span.a {
    display:none;
}

#line1 span.b,
#line2 span.b, 
#line3 span.b, 
#line4 span.b, 
#line5 span.b {
    display:none;
}

#line1:hover span.b,
#line2:hover span.b,
#line3:hover span.b,
#line4:hover span.b,
#line5:hover span.b {
    display:inline;
}​
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51
  • @Billy Moat: :p no problem, next time. – Ahsan Khurshid Jul 24 '12 at 11:05
  • Too much ID's, not really necessary. – Nuxy Jul 24 '12 at 11:06
  • 1
    @Nuxy: This is a pure CSS Solution, By using javascript/jQuery you may avoid this. If you have better then that please share for our knowledge. – Ahsan Khurshid Jul 24 '12 at 11:08
  • 2
    @A.K: Look at my answer, it achieves the same result but without using multiple IDs. Just using the selector of the element li is enought. It0s not necessary to use an ID for each one. – Nuxy Jul 24 '12 at 11:09
  • @Nuxy - I must have missed something then. Please provide a fiddle showing a way of doing this using only CSS without multiple IDs. – Billy Moat Jul 24 '12 at 11:09
  • @Billy Moat: ^^ the hover event just affects the element you're doing the hover, so, it didn't had effect on all the divs. – Nuxy Jul 24 '12 at 11:17
  • @Nuxy - Yeah, I was thinking it would affect all LI elements! My bad! – Billy Moat Jul 24 '12 at 11:22
  • Whilst this solution also worked for me, I did prefer the solution with the shorter CSS code. Thank you too though for your help. – Instronics Jul 24 '12 at 11:26