CSS3 show a division on hover of another element - html

Question

I have the following code to show a division on hover. It is initially hidden and i'm trying to show one division on hover of another element.
.topNav {
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu {
list-style-type: none;
}
.mainMenu li {
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a {
text-decoration: none;
color: white;
}
#item1 {
display: block;
}
#item1:hover #item1detail {
background: #444;
visibility: visible;
}
#item1detail {
position: absolute;
top: 152px;
left: 250px;
background: #ccc;
width: 750px;
height: 400px;
border: solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
on hover of the list item item1 i want to show the division itemdetail. The above code is not working. What am i doing wrong?

Answer 1

As I see it the only solution to display the given div without touching the HTML would be Javascript... As the others suggested already...
BUT... there's a solution with one slight change to your HTML and CSS each.
The main problem is this CSS-selector:
#item1:hover #item1detail
which would translate to "id item1detail INSIDE of an hovered id item1".
You can fix this by placing the div inside of the li and change the selector to:
#item1:hover + #item1detail
Since the div is positioned absolute anyway it doesn't make a visual difference... at least for your snippet...
Updated version of your snippet:
.topNav
{
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu
{
list-style-type: none;
}
.mainMenu li
{
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a
{
text-decoration: none;
color: white;
}
#item1
{
display: block;
}
#item1:hover + #item1detail
{
background: #444;
visibility: visible;
}
#item1detail
{
position: absolute;
top: 152px;
left: 250px;background: #ccc;
width: 750px;
height: 400px;
border:solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li >
<a id="item1" href=""> item 1</a>
<div id="item1detail">
Some random content
</div>
</li>
<li> item 3</li>
<li> item 4</li>
<li> item 5</li>
<li> item 6</li>
<li> item 7</li>
<li> item 8</li>
<li> item 9</li>
</ul>
</div>

Answer 2

You'll have to use javascript
<script>
function myFunction() {
if (document.getElementById("item1detail").hidden==false){
document.getElementById("item1detail").hidden = true;
}else{
document.getElementById("item1detail").hidden = false;
}
}
</script>
and
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" onhover="myFunction()" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>

Answer 3

I would do that using jQuery.
$('#item1').hover(function(){
$('#item1detail').show();
}, function(){
$('#item1detail').hide();
});

Answer 4

The reason your CSS isn't working is because you're using this selector:
#item1:hover #item1detail
Which selects the element with id #item1detail occurring within the element with id #item1, if the #item1 element is hovered.
In your current markup, #item1detail is outside #item1, and so does not match the selector. Moving #item1detail should get you the behavior you want. (And there will probably be some layout work to do from that point.)

Answer 5

The #item1detail element is not a sibling of the #item1 element, so that is why the #item1:hover #item1detail CSS rule does not apply as you expect it to.
I believe if this is to work with CSS only (not JavaScript), then you will have to make #item1detail a sibling of #item1.