1

別の要素で onmouseover 関数を使用して、クラス名を複数の div に変更しようとしています (追加したほうがよいでしょう)。2 つの要素は互いにネストされていないため、単純な CSS を使用してそうすることができない (または少なくともしない) と思います。読みやすくするために、次のコードを単純化しています。「アイテム」の実際の html はもう少し入れ子になっています。これが問題にならないことを願っています

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
</ul>

<div id="items">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-b"></div>
    <div class="item-a"></div>
    <div class="item-b"></div>
</div>

したがって、基本的に私がやりたいことは、マウスで「li」要素をホバーすると、div「アイテム」の対応するクラスがそれ自体に追加されたクラスを取得することです（したがって、ボタンのクラス「a」はすべてにクラス「ホバー」を追加します「item-a」クラスなど）。

私はjavascript/jqueryにかなり慣れていません。これまでのところ、クラスの代わりに Id を使用してそれを行うことができましたが、ID は一意でなければならないため、必要なものではありません。コードは次のとおりです。

onmouseover="document.getElementById('item-a').className = 'hover';"

これはうまくいきました。1 つの div (その ID を持つ最初のもの) のみですが、機能したので、Id から ClassName に変更しようとしましたが、機能しませんでした

onmouseover="document.getElementsByClassName('item-a').className = 'hover';"

また、上記のコードが機能する場合、クラスが変更されますが、追加することをお勧めします(その後、onmouseout 関数で削除します)。

参考までに、私が行った多くの検索の中で、このリンクも試し ました jsでcss：hoverイベントをトリガーし て、状況に適応させようとしています

$(window).load(function() {
 $('.a').hover(function(){
    $('.item-a').addClass('hover');
});
}

結果なし。

助けてくれてありがとう。

4

2 に答える 2

4

私はお勧めします：

$('#buttons li').hover(function(){
    $('.item-' + this.className).addClass('hover');
},
function(){
    $('.item-' + this.className).removeClass('hover');
});

JS フィドルのデモ。

参考文献:

于 2012-12-23T13:24:59.713 に答える
1

マークアップを少し仕上げると、プレーンな CSS でそれを行うことができます。

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
   <li class="items">
       <div class="item-a"></div>
       <div class="item-b"></div>
       <div class="item-b"></div>
       <div class="item-a"></div>
       <div class="item-b"></div>
   </li>
</ul>​​​​​

.a:hover ~ li .item-a {
    background: red;
}

.b:hover ~ li .item-b {
    background: blue;
}

デモ

于 2012-12-23T13:42:19.967 に答える