Making a div appear upon hovering on another div

Question

I have searched a lot for this, I can not find an answer. I want the div SubTopicInfo1 to appear when hovering over the div subTopicNav1. I need it to be only CSS.

Here is what I have:

Fiddle

HTML:

<div id="NavBar">

                <div id="Mainbutton">
                <center><h2 style="margin-top: 7px;"> Main </h2></center>
                </div>

                <div id="topic1button">
                <center><h2 style="margin-top: 7px;"> Skiing </h2></center>
                </div>

                <div id="topic2button">
                <center><h2 style="margin-top: 12px;"> Movies </h2></center>
                </div>


        </div>

        <div id="Main">

                <div id="IntroImage">

                </div>

                <div id="Title">
                        <h2 id="Titlemain"> TYLER POTTS</h2>
                </div>

                <div id="SubTopicNav">

                        <div id="subTopicNav1">
                                <center><h2>About Me</h2></center>
                        </div>

                        <div id="subTopicNav2">
                                <center><h2>Skiing</h2></center>
                        </div>

                        <div id="subTopicNav3">
                                <center><h2>Movies</h2></center>
                        </div>

                </div>

                <div id="SubTopicInfo">

                        <div id="SubTopicInfo1">
                        <h1> Test </h1>
                        </div>

                        <div id="SubTopicInfo2">

                        </div>

                        <div id="SubTopicInfo3">

                        </div>

                </div>

                <div id="Footer">

                </div>

        </div>

CSS:

#NavBar
{
width: 750px;
height: 40px;
background-color: white;
margin: 0 auto;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
}


#topic2button
{
width: 100px;
height: 45px;
margin-top:-50px;
margin-left: 215px;
float:left;
}

#topic2button:hover
{
background-color: #FFD640;
}

#Mainbutton
{
width: 100px;
height: 45px;
margin-top:;
margin-left: 315px;
float:left;
}

#Mainbutton:hover
{
background-color: #FFD640;
}

#topic1button
{
width: 100px;
height: 45px;
float: left;
}

#topic1button:hover
{
background-color: #FFD640;
}

#Main
{
width: 750px;
height: 1000px;
margin: 0 auto;
background-color: white;
}

#IntroImage
{
width: 750px;
height: 150px;
background-image:url("http://skiersedgeproshop.com/wp/wp-content/uploads/2013/11/snow-mountain-ski1.jpg")
}

#IntroImage:hover
{
opacity: 0.8;
}

#Title
{
width: 500px;
height: 40px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin:0 auto;
margin-top: 10px;
}

#Titlemain
{
margin-left: 170px;
margin-top: 6px; 
}

#SubTopicNav
{
width: 150px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float:left;
}

#subTopicNav1
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav2
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav3
{
margin-top: 60px;
width: 150px;
height: 50px;
}

#subTopicNav1:hover 
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#subTopicNav2:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#subTopicNav3:hover
{
margin-top: 60px;
width: 150px;
height: 50px;
background-color: #FFD640;
}

#SubTopicInfo
{
width: 600px;
height: 400px;
border-top: 5px solid #FFD640;
border-bottom: 5px solid #FFD640;
margin-top: 25px;
float: left;
}

#SubTopicInfo1
{
display:none;
background-color: #FFD640;
}

#subTopicNav1:hover + #SubTopicInfo1
{
display: block;
}

Thanks.

I dont think you can do that with just css, unless the div was in an anchor. I believe the is the only element that has a hover property. Probably could do it was JS. — user1336827, Dec 20 '13 at 14:32
I have done it before and have seen other questions with solutions, it just doesn't seem to work on this site and I am not sure why. — user3123020, Dec 20 '13 at 14:34
It can be done with css only if SubTopicInfo1 is a child/sibling of subTopicNav1, otherwise you need to use javascript — Caelea, Dec 20 '13 at 14:37
As @Caelea notes, this is impossible (even under CSS4's selectors module, because of '[Fast vs Complete Selector Profiles](http://www.w3.org/TR/2013/WD-selectors4-20130502/#profiles)') with CSS because you're hovering an element that is the child of a sibling to the element you want to manipulate. This is because CSS lacks the capacity to traverse to a parent element, and can only navigate/select children and subsequent siblings of the hovered-element. — David Thomas, Dec 20 '13 at 14:41

score 1 · Answer 1 · edited May 23 '17 at 12:03

1

You wont be able to do so with just CSS in your situation.

#subTopicNav1:hover + #SubTopicInfo1 {}

Works if #SubTopicInfi1 is next to (after #subTopicInfo1 closing tag) the container.

explained here:

How to affect other elements when a div is hovered

So you probably should look into a solution with Jquery/javascript!

edited May 23 '17 at 12:03

Community

1
1

answered Dec 20 '13 at 14:36

Kevinvhengst

1,672
4
27
40

I haven't even touched javascript when it comes to web design yet, so I will try reworking the website to make it work. – user3123020 Dec 20 '13 at 14:42
1

It would be good to try it out! You can do quite some awsome things you won't be able to do with just CSS! – Kevinvhengst Dec 20 '13 at 14:49

score 0 · Answer 2 · answered Dec 20 '13 at 14:35

0

Please try something like this:

(Hide the extra info panel by default, then make it visible on :hover like below)

<style>
.link {
        display: block;
}

.link:hover p{
        visibility: visible;
}
.info{
        visibility: hidden;
}

</style>

<body>
        <div class="link">
                <a href="#"> Text Here </a>
                <p class="info"> Info Here</p>
        </div>
</body>

answered Dec 20 '13 at 14:35

vandijkstef

407
3
8

Could you include an explanation of your solution? – everton Dec 20 '13 at 14:55
Sorry for being this late, but as said above the code; I hide the extra panel by default, and show when hovering – vandijkstef Feb 08 '14 at 13:14

score 0 · Answer 3 · answered Dec 20 '13 at 15:04

Here is the working Demo http://jsfiddle.net/H9fGP/1/ maybe its not the exact example. but I hope it helps :)

the main thing is that the sub info has absolute position

I rearanged the html and added some css.

.container
{
 border-top: 5px solid #FFD640;

 margin-top: 25px;
}

#SubTopicNav 
{
  position:relative;
}
#SubTopicNav > div > div
{
  position:absolute;
  left:200px;
  top:0px;
  display:none;
  width: 600px;
  height: 400px;
  margin-top: 25px;
  float: left;
}
#SubTopicInfo
{
  display:none;
  background-color: #FFD640;
}

#SubTopicNav > div:hover >div
{
 display: block;
}

Thanks! I will be using this. – user3123020 Dec 20 '13 at 15:09 — user3123020, Dec 20 '13 at 15:09

Making a div appear upon hovering on another div

3 Answers3