当鼠标悬停在图像上时标签隐藏/显示？

我想有一个标签被所示，当用户将鼠标悬停在图像当鼠标悬停在图像上时标签隐藏/显示？

例如，如果用户鼠标悬停图像1，它会隐藏标签2 & 3，但显示标签1.我不知道如何更改文本当鼠标悬停，但我不知道如何做到这一点。

<html> 
<head> 
<style type="text/css"> 
    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; 
    } 
</style> 

</head> 
<body> 
<div id="line1"> 
    <table border="1"> 
     <tr> 
      <td> 
       <span id="a">this is sick</span><span id="b">this is awesome</span> 
      </td> 
     </tr> 
    </table> 
</div> 
</body> 
</html>

来源

2013-07-10 user1464667

您使用JavaScript和jQuery标记你的问题我却没有。你只是在寻找一个JavaScript解决方案还是CSS？ – j08691

我确信有很多这样的例子可以通过搜索找到。 –

对于[css解决方案...]（http://stackoverflow.com/questions/3659294/pure-css-hover-show-another-element-possible） – kingdamian42

JQuery将是一个简单的方法来显示/隐藏任何你想要的事件。

$("#image1").hover(function(){ 
    //hover handler 
    $("#label1, #label2").css("display", "none"); 
}. 
function(){ 
    //un-hover handler 
    $("#label1, #label2").css("display", "block"); 
});

来源

2013-07-10 17:35:13 Seano666

更改此：

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

到：

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

希望这有助于！

例子：http://jsfiddle.net/hwxfV/

来源

2013-07-10 17:42:49

我之前没有用过这个1up，因为这个任何时候我需要让悬停效果影响一个单独的对象，我一直都会用javascript解决方案。 – qualebs

很高兴我可以帮助:) –

当鼠标悬停在图像上时标签隐藏/显示？

回答

相关问题