CSS: Hover in one DIV, how to display information from another DIV?
Question
Got a list with 3 items. Upon hovering over a item information shall be displayed. Works fine within same <DIV> . How about displaying information from another <DIV> , I guess this should be possible, isn't it?
Initially only the three lisitings are displayed. When hovering over 'listing 2' the content of '#special' can be displayed, no problem.
When hovering over 'listing 3' the content of '#AlsoSpecial' is not displayed, Why?. Is there a remedy?
Sample HTML:
<div id="top">
<ul>
<li class="left">listing 1</li>
<li class="center">listing 2</li>
<li class="right">listing 3</li>
<li><div id="special">
<p>bla1bla1bla1</p>
</div></li>
</ul>
</div>
<div id="content">
<div id="AlsoSpecial">
<p>bla2bla2bla2</p>
</div>
</div>
Sample CSS:
#top > li {display:inline;}
/*this works fine*/
div#special {display:none;}
.center:hover div#special {display:block;}
/*this does not work, WHY?*/
div#AlsoSpecial {display:none;}
.right:hover div#AlsoSpecial {display:block;}
3 answers
solution1
3 ACCPTED
When an element is sibling of another one, you should use the + selector. So, doing this should do it.-
li:hover + div#special
However, note that UL elements expect only LI elements inside, adding something different is illegal and you should not.
I recommend you to place the DIV element inside of the element you want to hover. So a much better solution would be
...
<li>text
<div>contents</div>
</li>
...
...styled with the CSS selector.-
li:hover > div#special
Consider also using class="special" instead of ID, if there is any posibility that you want to have more than one DIV reacting to that hover event... remember that IDs are unique and cannot be used in more than one element.
If you want to make appear a div that is “unmatchable” with CSS, you would have to use Javascript, an example for doing this in Javascript here.-
var toShow = document.getElementById('alsoSpecial'),
toHover = document.getElementById('toHover'), // ...for instance.
showOrNot = function(e)
{
toShow.style.display = (e.type == 'mouseover')?
'block': 'none';
};
toHover.addEventListener('mouseover', showOrNot, 1);
toHover.addEventListener('mouseout', showOrNot, 1);
I typed the code on the fly and did not try it. I hope it works alright, if it does not work please let me know.
Greetings.
solution2
1 2011-08-29 23:55:22
It doesn't work because the div with id "AlsoSpecial" is not a child element of any element with class "right" - but you are trying to match it using the descendant selector .
I think using standard CSS selectors you will have a hard time matching anything that is not in a "sibling" or "descendant" relationship.
I would resort to Javascript in this case.
solution3
0 2011-08-31 00:39:48
Both answers provided are correct, but I decided to use the least code possible (may be a bit old fashioned) as follows:
<script type="text/javascript">
/*<![CDATA[*/
function showDetails()
{document.getElementById("AlsoSpecial").style.display="block";}
function hideDetails()
{document.getElementById("AlsoSpecial").style.display="none";}
/* ]]> */
</script>
<body>
...
<a title="Display Details" href="#AlsoSpecial" rel="nofollow" onmouseover="showDetails()" onmouseout="hideDetails()">View Details</a>
...
<div id="AlsoSpecial">
<p>bla2bla2bla2</p>
</div>
</body>
Thank you both.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.