CODEWITHSUNDEEP
htmlcss
Sooraj
Sooraj

Reputation: 10567

CSS3 show a division on hover of another element

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><a href=""> item 3</a>
    </li>
    <li><a href=""> item 4</a>
    </li>
    <li><a href=""> item 5</a>
    </li>
    <li><a href=""> item 6</a>
    </li>
    <li><a href=""> item 7</a>
    </li>
    <li><a href=""> item 8</a>
    </li>
    <li><a href=""> item 9</a>
    </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?

Upvotes: 1

Views: 590

Answers (5)

Foaster
Foaster

Reputation: 656

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><a href=""> item 3</a></li>
     <li><a href=""> item 4</a></li>
     <li><a href=""> item 5</a></li>
     <li><a href=""> item 6</a></li>
     <li><a href=""> item 7</a></li>
     <li><a href=""> item 8</a></li>
     <li><a href=""> item 9</a></li>
     
    </ul>
  </div>

Upvotes: 4

Joseph Bisch
Joseph Bisch

Reputation: 176

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.

Upvotes: 0

pkh
pkh

Reputation: 3749

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.)

Upvotes: 0

supercowz
supercowz

Reputation: 102

I would do that using jQuery.

$('#item1').hover(function(){
  $('#item1detail').show();
}, function(){
  $('#item1detail').hide();
});

Upvotes: 0

Fundhor
Fundhor

Reputation: 3587

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><a href=""> item 3</a>
    </li>
    <li><a href=""> item 4</a>
    </li>
    <li><a href=""> item 5</a>
    </li>
    <li><a href=""> item 6</a>
    </li>
    <li><a href=""> item 7</a>
    </li>
    <li><a href=""> item 8</a>
    </li>
    <li><a href=""> item 9</a>
    </li>

  </ul>
  <div id="item1detail">
    Some random content
  </div>
</div>

Upvotes: 3

Related Questions