html - CSS hover stops working after using a JavaScript function to display different span -

so have group of spans corresponding labels. want able hover on label , see corresponding picture.

in css have:

<style> td:hover span {     display: block; } </style> 

my spans like:

<td><label>firstlabel</label> <span id="image1" class="first_image_span" style="display:block" > <img src="image1.jpg"></span></td>   <td><label>secondlabel</label> <span id="image2" class="second_image_span"> <img src="image2.jpg"></span></td>  <td><label>thirdlabel</label> <span id="image3" class="third_image_span"> <img src="image2.jpg"></span></td> 

if code had, work fine. problem had add buttons navigate pictures manually. problem once show span 2 , hover on stops working on span 1. when go span 3, hover on stops working span 1, , 2. there can do? javascript function works this:

function changeimage(count) {   document.getelementbyid(functionspanname.tostring() + slidecounter.tostring()).removeattribute("style");    slidecounter += count;  document.getelementbyid(functionspanname.tostring() + slidecounter.tostring()).style.display = "block"; } 

at first thought problem wasn't working because there no style.. @ start of pageload, first span span have style , other hovers work on other spans. replacing remove attribute style.display = "none" doesn't work since means spans permanently not display.

rather messing manually adding , removing style, why not add or remove class indicate selected item.

something this:

td span {     display: none; } td span.current, td:hover span {     display: block; } 

and change function this:

function changeimage(count) {     var currid = functionspanname.tostring() + slidecounter.tostring();     document.getelementbyid(currid).classname = '';     slidecounter += count;     currid = functionspanname.tostring() + slidecounter.tostring();     document.getelementbyid(currid).classname = 'current'; }