CSS3：正しく使用する方法：ホバーを押して他の要素のスタイルを変更しますか？

疑似クラス:hoverの使用について混乱します。以下のHTMLでCSS3：正しく使用する方法：ホバーを押して他の要素のスタイルを変更しますか？

、:hoverul要素に対して期待されるような作品ではなくdivもののために：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset:"utf-8" /> 
<style> 

#div1:hover #div2 { 
    color: green; 
} 

#ul2 { 
    display: none; 
} 

#ul1:hover #ul { 
    display:block; 
}  

</style> 
</head> 

<body> 
<div id='div1'> 
If I hover this, then the next div should change color to green... 
</div> 

<div id='div2'> 
But it doesn't change colors! 
</div> 

<ul id='ul1'> 
<li>If I hover this, then ul2 shows up</li> 
<ul id='ul2'> 
<li>We're showing up!</li> 
<li>We're showing up!</li> 
</ul> 
<li>etc.</li> 
</ul> 

</body> 
</html>

#div2私は（この行#div1:hover + #div2 {から#div1:hover #div2 {を変更プラス記号に気づいた場合のみ、緑色に変わります"+"）。私は理解していない、なぜ "+"必要ですか？このquestionでは、コードでもnav ul li:hover > ulが使用されています。 >とは何ですか？

質問をまとめる：:hover CSSを別の要素のスタイルに変更するルールは何ですか？

出典

2017-04-13 flen

thatsのは、あなたはその – Felix

FelixHä[email protected]感謝のためのjavascript（jqueryの）を使用する必要があります！しかし、それはなぜですか？ブラウザの実装に問題はありますか？ – flen

cssの指定の場合 – Felix

のように仕事をしたい場合は、「+」必要な理由私は、理解していない＃1 DIV1の子である必要がありますか？

よりここの子要素

読むとは反対のような一つの使用目的の即時兄弟要素である要素の隣接兄弟セレクタ、用+スタンド：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

> forとは何ですか？

子セレクタの>スタンド、およびターゲット直下の子のみ

もっとここで読む側の注意点としてhttps://developer.mozilla.org/en/docs/Web/CSS/Child_selectors

、（ulを持つことは無効ですこの場合は<ul id='ul2'>）を別のulの直接の子として使用する場合、内側のものはli

出典

2017-04-13 08:53:31 LGSon

ありがとうございます！私は過去2時間このことに苦労してきました！だから。あなたの回答を回答として選んでいますが、StackOverflowは3分前にそれを選択することを禁じています。 – flen

@flen – LGSon

あなたの＃1 DIV2は、あなたはそれがその

出典

2017-04-13 08:52:54 maxDef

あなたは何をしたいですか？同じホバーフォームを両方のdivの形式で使用したい場合、このようなものかもしれません。純粋なCSSで動作していない

#div1:hover, #div2:hover {color: green;}

出典

2017-04-13 09:15:28

CSS3：正しく使用する方法：ホバーを押して他の要素のスタイルを変更しますか？

答えて

関連する問題