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;}

Answer 1

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.