非表示のdivを(hover時に)表示するCSSの例です。
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
そして
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
あるdivを表示し、別のdivを非表示にすることは、CSSだけで**可能でしょうか? 以下は、この目的のためにJSを使用する方法の例です: [
][1].以下はそのコードです。
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
<div class="showhim">
HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
相手が親の兄弟・子、またはその組み合わせである場合 はい
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .hideme{
display : none;
}
.showhim:hover ~ .hideme2{ //~ sibling selector
display:none;
}
<div class="showhim">
HOVER ME
<div class="showme">hai</div>
<div class="hideme">bye</div>
</div>
<div class="hideme2">bye bye</div>
このような試みはされましたか?
.showme{display: none;}
.showhim:hover .showme{display : block;}
.hideme{display:block;}
.showhim:hover .hideme{display:none;}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="hideme">bye</div>
</div>
できない理由は何もないと思います。