0

当用户将鼠标悬停在图像上时，我试图显示一个标签

例如，如果用户将鼠标悬停在 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>
4

2 回答 2

2

改变这个：

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

至：

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

希望这可以帮助！

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

于 2013-07-10T17:42:49.253 回答
0

JQuery 将是一种在事件中显示/隐藏您想要的任何内容的简单方法。

$("#image1").hover(function(){
  //hover handler
  $("#label1, #label2").css("display", "none");
}.
function(){
  //un-hover handler
  $("#label1, #label2").css("display", "block");
});
于 2013-07-10T17:35:13.607 回答