Question

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

例如，如果用户将鼠标悬停在Image1上，它将隐藏标签2＆amp; 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

改变这个：

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

为：

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

希望这有帮助！

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

Answer 2

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

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

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

2 个答案: