0

一度に3つのアイテムをホバーしたい。そのうちの1つにカーソルを置きます。他の2つのアイテムにカーソルを合わせる必要があります。誰でも助けてください。javascriptでこれをやりたいです。モデルを作ったのですが、良くありません。関数で使いたいので、何度でも使えます。私を助けてください。

<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
.boxes {
    float: left;
    display: inline;
    width:150px;
    height:100px
}
.box1 {
    width:50px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    height: 20px;
}

.box4 {
    display: inline-block;
    width:150px;
    padding:10px;
    border:1px solid gray;
    height: 100px;
}


</style>
<script>
$(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');

    });
       $('.box4').mouseover(function(){
        $('.box4').css('background-color', '#F7FE2E');
        $('.box1').css('background-color', '#F7FE2E');
        $('.hov').css('color', '#0f0');

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

    });

});

</script>
</head>

<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>
<br/>
<div class="boxes">
    <div class="box1">Box 1</div>

</div>
<div class="box4"><a href="#" class="hov">box4</a> </div>

</body>
</html>
4

2 に答える 2

2

divを親divでグループ化すると、HTML構造を使用して何を強調表示するかを決定できます。正確な使用モデルはわかりませんが、次のようになります。

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

<div class="boxgroup">
    <div class="box1 hover"></div>
    <div class="box2 hover"><a href="mylink" class="hov">Link</a></div>
</div>

そして、jQueryで：

$(document).on('mouseover', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').addClass('hovercolor');
    boxgroup.find('.hov').css('color', '#0f0');
}).on('mouseout', '.hover', function () {
    var boxgroup = $(this).closest('.boxgroup');
    boxgroup.find('.hover').removeClass('hovercolor');
    boxgroup.find('.hov').css('color', '#000');
});

ここでは、.closest()がどのグループに属しているかを見つけて、そのグループ内の他のすべてのアイテムをdiv強調表示するために使用します。.hover

例：

http://jsfiddle.net/jtbowden/HZtVP/3/

divを物理的にグループ化しないようにする場合は、他の方法で必要な操作を行うことができます。

于 2013-01-29T17:19:46.040 に答える
0

  1. マッピングJavaScriptオブジェクトを使用します。

  2. クラス'like'セレクターを使用して、「。box」で始まるクラスを持つ要素に関数をバインドします。

例：

$(document).ready(function(){
    var mapping = { 'box1':'box4','box4':'box1' };

    $("[class^=box]").mouseover(function(){
       .........

    });
于 2013-01-29T09:21:10.963 に答える