web-dev-qa-db-ja.com

CSS On hoverは別の要素を表示します

CSSを使用してdiv id='b'にカーソルを合わせたときにdiv id='a'を表示したいのですが、div 'a'が別のdiv that div 'b'は含まれていません。

<div id='content'>
     <div id='a'>
         Hover me
     </div>
</div>
<div id='b'>
    Show me
</div>
htmlcsshover
38
user2770029

このようにホバリングすると同じラベルdivを表示できます

<style>
#b {
    display: none;
}

#content:hover~#b{
    display: block;
}

</style>
63
Ankit Agrawal

確かに次のコードで可能です

 <div href="#" id='a'>
     Hover me
 </div>

<div id='b'>
    Show me
</div>

とCSS

#a {
  display: block;
}

#a:hover + #b {
  display:block;
}

#b {
  display:none;
  }

次に、要素#aにカーソルを合わせると、要素#bが表示されます。

20
Sharath kumar

これにはaxeセレクターを使用できます。

2つのアプローチがあります。

1.直接の親aセレクター（<）

#a:hover < #content + #b

このaxeスタイルルールは、#bの直接の兄弟である#contentを選択します。これは、#aを持つ:hoverの直接の親です。状態。

div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover < #content + #b {
display: inline-block;
}
<div id="content">
<div id="a">Hover me</div>
</div>

<div id="b">Show me</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

2.リモート要素のSelectセレクター（\）

#a:hover \ #b

このaxeスタイルルールは、#b状態を持つ#aと同じドキュメントに存在する:hoverを選択します。

div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover \ #b {
display: inline-block;
}
<div id="content">
<div id="a">Hover me</div>
</div>

<div id="b">Show me</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>
8
Rounin