Here is CSS example how to show hidden div (on hover):
<div class="showhim">HOVER ME<div class="showme">hai</div></div>
and
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
Can I show one div and hide another one at the same time by using only CSS? Here is example how to use JS for this purpose: http://jsfiddle.net/joshvito/GaZQ6/
This question is related to
css
Here is the code
.showme{ _x000D_
display: none;_x000D_
}_x000D_
.showhim:hover .showme{_x000D_
display : block;_x000D_
}_x000D_
.showhim:hover .ok{_x000D_
display : none;_x000D_
}
_x000D_
<div class="showhim">_x000D_
HOVER ME_x000D_
<div class="showme">hai</div>_x000D_
<div class="ok">ok</div>_x000D_
</div>_x000D_
_x000D_
_x000D_
Have you tried somethig like this?
.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>
I dont know any reason why it shouldn't be possible.
if the other div is sibling/child, or any combination of, of the parent yes
.showme{ _x000D_
display: none;_x000D_
}_x000D_
.showhim:hover .showme{_x000D_
display : block;_x000D_
}_x000D_
.showhim:hover .hideme{_x000D_
display : none;_x000D_
}_x000D_
.showhim:hover ~ .hideme2{ _x000D_
display:none;_x000D_
}
_x000D_
<div class="showhim">_x000D_
HOVER ME_x000D_
<div class="showme">hai</div> _x000D_
<div class="hideme">bye</div>_x000D_
</div>_x000D_
<div class="hideme2">bye bye</div>
_x000D_
Source: Stackoverflow.com