當鼠標懸停在圖像上時標籤隱藏/顯示？

我想有一個標籤被所示，當用戶將鼠標懸停在圖像當鼠標懸停在圖像上時標籤隱藏/顯示？

例如，如果用戶鼠標懸停圖像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

很高興我可以幫助:) –

當鼠標懸停在圖像上時標籤隱藏/顯示？

回答

相關問題