3

周りを見回しましたが、これに対する正しい答えが見つかりません...別の要素がホバーされていると仮定して、要素をホバーするように設定するにはどうすればよいですか?

「セレクター」がホバーされていると仮定すると、ホバーし、ボックス1 + 2など...

http://jsfiddle.net/wgJRQ/

<div id="table">
<div id="row">
    <div id="selector">selector 1</div>
    <div id="selector2">selector 2</div>
</div>
<br />
<div id="row">
    <div id="box1">box 1</div>
    <div id="box2">box 2</div>
</div>
<div id="row">
    <div id="box3">box 3</div>
    <div id="box4">box 4</div>
</div>

4

3 に答える 3

1

jQuery:

$('#table > div:first > div')
    .hover(function() {
        $('#table').children('div')
            .eq($(this).index() + 1)
            .children('div')
            .toggleClass('active');
        return false;
    });

http://jsfiddle.net/samliew/pyY5u/

ホバー状態を最適化し、次のような単一の宣言に減らしたい場合があります。

#table > div:nth-child(n+1) > div {
    border:2px solid #FFFFFF;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
#table > div:nth-child(n+1) > div:hover,
#table > div:nth-child(n+1) > div.active {
    background-color:#FFFFFF;
    border:2px solid #666666;
}
#box1, #box2 {
    background-color:#E07586;
}
#box3, #box4 {
    background-color:#837C71;
}
于 2013-03-17T03:05:58.447 に答える
1

次のようなものを試してください

#box1:hover, #box1:hover~#box2 {
    display: table-cell;
    background-color:#FFFFFF;
    border:2px solid #666666;
    text-align: center;
    vertical-align: middle;
}

デモ:フィドル

于 2013-03-17T02:42:06.430 に答える
0

CSS では、「ターゲット」要素がホバーされている要素内にある場合にのみ実行できます。

あなたの場合、セレクター 1内にボックス 1 とボックス 2 があるように、レイアウトを行ではなく列に配置するように変更する必要があります。これにより、セレクターにカーソルを合わせたときに box1 の外観を変更できます。.selector:hover .box1 {...}

これができない場合は、Javascript を使用する必要があります。

Javascript ではトリガーできないこと:hoverに注意してください。マウスがセレクターに入ったときにボックスにクラスを追加し、セレクターから出たときにクラスを削除する必要があります。

于 2013-03-17T10:13:38.407 に答える