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

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 に答える