Why is my Hover Function not working Properly?

Question

I am making a work index for high school and I am using a JQuery hover function but its acting up. You're supposed to hover over a project link and it shows a little preview picture of it in a box created using CSS, hovering over the link also shows the user you are hovering over it by adding a yellow background to the text. It seems to work for the first two or so hovers and then it just stops working. The hover works all the time with the background color changing but after the first two or so hovers the preview pictures just stop showing up on mouseover. I don't know where the problem is.

Here is a sample of what I am making, test it for yourself and it would be nice if you link another with a working version. JSFiddle

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2    /jquery.min.js"></script>

<div id="preview">
<span class="lbpv1">
<img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>
<span class="lbpv2">
<img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>
</div>

<li id="lb1">
<b> Lab #1 </b>
    <i> blooblooblop </i>
    </br></br>
</li>

<br />

<li id="lb2">
<b> Lab #2 </b>
    <i> bleepbleepbloop </i>
    </br></br>
</li>

CSS

#preview
{
   width: 200px; 
   height: 150px;
   position: fixed;
   top: 50px;
   right: 50px;
   background-color: #EEE;
   z-index: 2;
   box-shadow: 3px 3px 8px rgba(0,0,0,.4);
}

.lbpv1 img, .lbpv2 img
{
   display: none;
}

JavaScript

$(document).ready(function() {
$("#lb1").hover(function()
{
    $("#lb1").css("background-color", "yellow");
    $("#preview span").removeClass("lbpv1");
    }
    ,function()
    {
    $("#lb1").css("background-color", "transparent");
    $("#preview span").addClass("lbpv1");
});
$("#lb2").hover(function()
{
    $("#lb2").css("background-color", "yellow");
    $("#preview span").removeClass("lbpv2");
    }
    ,function()
    {
    $("#lb2").css("background-color", "transparent");
    $("#preview span").addClass("lbpv2");
});
});

Answer 1

It's because your $("#preview span").addClass("lbpv1"); is applying that class to all the span s in your #preview div. The moment you hover over another <li> , all the span s get 2 lbpv-something classes applied.

To fix this, you could possibly assign an id to each span or use a CSS pseudo class like -nth-child() to specify which span to add a class to. However, the entire setup isn't elegant and there is a simpler way to do this.

Right now, you're programmatically adding a class to the span s to toggle display:none . But, jQuery already has a .show() and .hide() function made specifically for this.

So you could do something like this:

$("#lb3").hover(function(){
    $("#lb3").css("background-color", "yellow");
    $("#preview span.lbpv3 img").show();
 }, function(){
    $("#lb3").css("background-color", "transparent");
    $("#preview span.lbpv3 img").hide();
});

forked JSFiddle

 $(document).ready(function() { $("#lb1").hover(function() { $("#lb1").css("background-color", "yellow"); $("#preview span.lbpv1 img").show(); }, function() { $("#lb1").css("background-color", "transparent"); $("#preview span.lbpv1 img").hide(); }); $("#lb2").hover(function() { $("#lb2").css("background-color", "yellow"); $("#preview span.lbpv2 img").show(); }, function() { $("#lb2").css("background-color", "transparent"); $("#preview span.lbpv2 img").hide(); }); $("#lb3").hover(function() { $("#lb3").css("background-color", "yellow"); $("#preview span.lbpv3 img").show(); }, function() { $("#lb3").css("background-color", "transparent"); $("#preview span.lbpv3 img").hide(); }); $("#lb4").hover(function() { $("#lb4").css("background-color", "yellow"); $("#preview span.lbpv4 img").show(); }, function() { $("#lb4").css("background-color", "transparent"); $("#preview span.lbpv4 img").hide(); }); $("#lb5").hover(function() { $("#lb5").css("background-color", "yellow"); $("#preview span.lbpv5 img").show(); }, function() { $("#lb5").css("background-color", "transparent"); $("#preview span.lbpv5 img").hide(); }); }); 

 #preview { width: 200px; height: 150px; position: fixed; top: 50px; right: 50px; background-color: #EEE; z-index: 2; box-shadow: 3px 3px 8px rgba(0, 0, 0, .4); } .lbpv1 img, .lbpv2 img, .lbpv3 img, .lbpv4 img, .lbpv5 img { display: none; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="preview"> <span class="lbpv1"> <img src="http://placehold.it/200x150/066" width="200" height="150" /> </span> <span class="lbpv2"> <img src="http://placehold.it/200x150/066" width="200" height="150" /> </span> <span class="lbpv3"> <img src="http://placehold.it/200x150/066" width="200" height="150" /> </span> <span class="lbpv4"> <img src="http://placehold.it/200x150/066" width="200" height="150" /> </span> <span class="lbpv5"> <img src="http://placehold.it/200x150/066" width="200" height="150" /> </span> </div> <li id="lb1"> <p><b> Lab #1 </b> <i> blooblooblop </i> </p> </li> <br /> <li id="lb2"> <p><b> Lab #2 </b> <i> bleepbleepbloop </i> </p> </li> <br /> <li id="lb3"> <p><b> Lab #3 </b> <i> blahdedah </i> </p> </li> <br /> <li id="lb4"> <p><b> Lab #4 </b> <i> bloopblahbleep </i> </p> </li> <br /> <li id="lb5"> <p><b> Lab #5 </b> <i> blahpbleepbloop </i> </p> </li>