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

Question

I am trying to have a label being shown when the user mouse over the image 当用户将鼠标悬停在图像上时，我正在尝试显示标签

For example, if the user mouseover Image1, it would hide label 2 & 3 but show label 1. I do know how to change text when mouseover, but I don't know how to do this. 例如，如果用户将鼠标悬停在Image1上，它将隐藏标签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>

Answer 1

Change this: 改变这个：

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

to: 至：

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

Hope this helps! 希望这可以帮助！

Example: http://jsfiddle.net/hwxfV/ 示例： http ： //jsfiddle.net/hwxfV/

Answer 2

JQuery would be an easy way to show/hide whatever you want in an event. JQuery将是一种在事件中显示/隐藏任何内容的简单方法。

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

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

问题描述

2 个解决方案

解决方案1
2 2013-07-10 17:42:49

解决方案2
0 2013-07-10 17:35:13

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

问题描述

2 个解决方案

解决方案1 2 2013-07-10 17:42:49

解决方案2 0 2013-07-10 17:35:13

解决方案1
2 2013-07-10 17:42:49

解决方案2
0 2013-07-10 17:35:13