3

別の要素のイベントで CSS を使用して要素を変更するにはどうすればよいですか?

E.g. <div id="one"> ....., <div id="two">....

<style>
#one:hover
{
changing the visibility of #two...
}
</style>
4

2 に答える 2

5

あなたの場合、変更したい要素はホバーした要素の後にあります。つまり、次のような構造になっています。

<div id="one"></div>
<!--you could have some elements between them-->
<div id="two"></div>

または好き：

<div id="one">
    <!--maybe some elements-->
        <div id="two"></div>
    <!---->
</div>

最初のケース ( #oneand#twoはsiblings、つまり、同じレベルにある = 同じ親を持つ) では、次のように一般的な兄弟コンビネータ( ~)を使用します。

#one:hover ~ #two { /* style changes */ }

#oneと#twoが兄弟であり、HTML の#one前ある場合のデモ。#two

2 番目のケース (#twoは の子孫)#oneでは、次を使用します。

#one:hover #two { /* style changes */ }

#twoが の子孫である場合のデモ#one。

ただし、 HTML の前 にある要素を変更したい場合、現時点では (これは将来変更される可能性があることを意味します)、CSS だけでは不可能です (理由を知りたい場合は、この記事で説明します)。 .#one

ただし、この場合、 HTML の#twobefore の場合は#one、JavaScript で行うことができます。たとえば、 の不透明度が initial の場合、#twoホバリング時に次の0ように変更できます。1#one

var one = document.getElementById('one'),
    two = document.getElementById('two');
one.addEventListener('mouseover', function(){
    two.style.opacity = 1;
}, true);
one.addEventListener('mouseout', function(){
    two.style.opacity = 0;
}, true);

デモ

jQuery のようなライブラリを使用している場合は、さらに簡単になります。

$('#one').hover(function(){
    $('#two').css({'opacity': 1})},
function(){
    $('#two').css({'opacity': 0})
});​​

デモ

于 2012-09-17T12:41:05.900 に答える
3

:hoverセレクターと~General Sibling セレクターを組み合わせて使用​​します。

div.margin:hover ~.margin2
{
    background: #00f;
}

div 2 にカーソルを合わせると、他の div の変更が表示されます。

これが機能するには、div が兄弟である (同じ親要素を持つ) 必要があります。

http://jsfiddle.net/Kyle_Sevenoaks/mmcRp/

于 2012-09-17T12:39:22.373 に答える