0

重複の可能性：
一度に3つまたは4つの要素をホバリングするためのJavaScript関数を作成する方法

一度に3つの要素をホバーしたい。そのうちの1つにカーソルを置きます。他の2つのアイテムにカーソルを合わせる必要があります。javascriptでこれをやりたいです。これを見てください：

http://jsfiddle.net/Taslimkhan/wTcTU/14/

HTMLドキュメントでクラスを3回使用しました。最初のボックスセットにカーソルを合わせると、すべてのボックスホバーが表示されます。ただし、必要です。ボックス1にカーソルを合わせると、Aボックスのみが表示され、Aボックスにカーソルを合わせると、ボックス1のみが表示されます。

ボックス2にカーソルを合わせると、Bボックスのみが表示され、Bボックスにカーソルを合わせると、ボックス2のみが表示されます。

ボックスの3番目のセットでも同じ動作が必要です。

同じクラスを2回使用することはできません。でも同じクラスを使いたいです。何回も何回も。しかし、どうすればそれらを行うことができますか？私を助けてください。

私が使用したコードがあります：

$(document).ready(function(){
// box 1
$('.box1').mouseover(function(){
    $('.box1').css('background-color', '#F7FE2E');
    $('.box4').css('background-color', '#F7FE2E');
    $('.hov').css('color', '#0f0');

});
$('.box1').mouseout(function(){
    $('.box1').css('background-color', '#FFF');
    $('.box4').css('background-color', '#FFF');
    $('.hov').css('color', '#fff');

});
4

2 に答える 2

1

あなたが何を達成しようとしているのかよくわかりません。毎回1つのボックスだけを黄色にしますか？

これは機能しますが、マークアップを少し変更します。

http://jsfiddle.net/wTcTU/19/

$(".box1").mouseenter(function() {
    $(this).parent().next().css("background-color", "yellow");
    $(this).css("background-color", "yellow");
});

$(".box1").mouseleave(function() {
    $(this).parent().next().css("background-color", "white");
    $(this).css("background-color", "white");
});

$(".box4").mouseenter(function() {
     $(this).prev().find(".box1").css("background-color", "yellow");
     $(this).css("background-color", "yellow");
});

$(".box4").mouseleave(function() {
     $(this).prev().find(".box1").css("background-color", "white");
     $(this).css("background-color", "white");
});
于 2013-01-29T16:49:35.687 に答える
1

これは私の変種です:

var $boxes = $('.box');
$boxes.hover(function() {
    $boxes.filter('.' + $(this).data('set')).addClass('active');
}, function() {
    $boxes.filter('.' + $(this).data('set')).removeClass('active');
});

不要なコードの重複を削除し、data-set属性を使用して、強調表示する必要がある対応するボックスを参照しました。

.cssメソッドを使用して HTML のスタイルを設定しないこともお勧めします。コードをきれいにするために、代わりに CSS クラスを使用する必要があります。

http://jsfiddle.net/dfsq/wTcTU/21/

于 2013-01-29T16:51:16.213 に答える