0

次のjqueryコードを使用しています：

$("#top ul li.corner").mouseover(function(){
    $("span.left-corner").addClass("left-corner-hover");
    $("span.right-corner").addClass("right-corner-hover");
    $("span.content").addClass("content-hover");
}).mouseout(function(){
    $("span.left-corner").removeClass("left-corner-hover");
    $("span.right-corner").removeClass("right-corner-hover");
    $("span.content").removeClass("content-hover");

});

しかし、マウスが上にあるすべての li.corner を実行するセレクターでわかるように。マウスが上にあるものだけを実行させようとしていますが、どうすればそれを達成できますか?

4

3 に答える 3

0

あなたの<span>要素はあなたの中にあります<li>か？もしそうなら、あなたは次のようなことをすることができます：

$('#top ul li.corner').mouseover(function() {
    $('span.left-corner', this).addClass('left-corner-hover');
    // etc...
}).mouseout(function() {
    $('span.left-corner', this).removeClass('left-corner-hover');
    // etc...
});

基本的に、これは呼び出された<span>内の特定の要素にクラスを割り当て/削除します。<li>

そこにあるものの量によっては、要素の境界を越えたときにマウスオーバーがトリガーされないように、とをmouseenter使用してより良い結果が得られる場合があります。mouseleave

$('#top ul li.corner').bind('mouseenter', function() {
  // etc...
}).bind('mouseleave', function() {
  // etc...
});
于 2008-11-28T20:28:44.660 に答える
0

私はあなたのコードがどのように見えるかを概算しようとしました、そしてテストはうまく実行されます：

css：

.left-corner-hover, .right-corner-hover, .content-hover {
    background-color: #CCC;
}

jQuery：

$("#top ul li.corner").mouseover(function(){
    $("span.left-corner", this).addClass("left-corner-hover");
    $("span.right-corner", this).addClass("right-corner-hover");
    $("span.content", this).addClass("content-hover");
}).mouseout(function(){
    $("span.left-corner", this).removeClass("left-corner-hover");
    $("span.right-corner", this).removeClass("right-corner-hover");
    $("span.content", this).removeClass("content-hover");

});

html：

<div id="top">
    <ul>
        <li class="corner">
            <span class="left-corner">Left Corner</span>
            <span class="content">Content</span>
            <span class="right-corner">Right Corner</span>
        </li>
    </ul>
    <ul>
        <li class="corner">
            <span class="left-corner">Left Corner</span>
            <span class="content">Content</span>
            <span class="right-corner">Right Corner</span>
        </li>
    </ul>
<div>
于 2008-11-28T20:46:52.910 に答える
0

試す：

$("#top ul li.corner").mouseover(function(){
    $(this).find(".left-corner").addClass("left-corner-hover");
    // ...
});

'span' 要素であることを指定する必要はおそらくないでしょう。

もう 1 つの方法は、「hover」クラスを追加および削除して、CSS ルールを次のようにすることです。

.left-corner.hover { ... }
.right-corner.hover { ... }
于 2008-11-28T20:57:18.783 に答える