show div element when another element is being hover

Question

I'm going straight to the point here. what I want is when I hover to services link I want the dropdown content to show... I'm not that good when it comes to css tricks so please bear with me..

<div id="Navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="nav-container">
                    <ul>
                        <li><a href= "javacsript:(0)">Home</a></li>
                        <li><a href= "javacsript:(0)">Services <i class="caret"></i></a></li>
                        <li><a href= "javacsript:(0)">Categories <i class="caret"></i></a></li>
                        <li><a href= "javacsript:(0)">Shop <i class="caret"></i></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

//I want to show this one when I hover on services
<div class="row dropdown-content">
    <div class="col-md-12">
       <p>Hello World!</p>
    </div>
</div>

so here's what I have tried so far.

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 5;
    border: 1px solid #c6c6c6;
}


#nav-container ul:hover .dropdown-content {
    display: block; 
}

it'll only show when I put the div inside the <ul> element...

thanks in advance...

I want to achieve this using css only....

http://www.w3schools.com/css/css_dropdowns.asp something like this? — Bram B, Jun 02 '16 at 09:25
http://www.w3schools.com/cssref/sel_element_pluss.asp , http://www.w3schools.com/cssref/sel_gen_sibling.asp ;-) `div#Navigation:hover ~ div.dropdown-content { display: block; }` — , Jun 02 '16 at 09:41
See this answer http://stackoverflow.com/questions/37587695/show-div-element-when-another-element-is-being-hover/#answer-37588289 — Jinu Kurian, Jun 02 '16 at 09:51

score 2 · Accepted Answer · answered Jun 02 '16 at 09:31

You need to place that dropdown div in the services <li> with css postion properties then only you css will work to block it on hover of <li>

HTML

<div id="Navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div id="nav-container">
          <ul>
            <li><a href="javacsript:(0)">Home</a></li>
            <li class="dropdown"><a href="javacsript:(0)">Services <i class="caret"></i></a>
              <div class="row dropdown-content">
                <div class="col-md-12">
                  <p>Hello World!</p>
                </div>
              </div>
            </li>
            <li><a href="javacsript:(0)">Categories <i class="caret"></i></a></li>
            <li><a href="javacsript:(0)">Shop <i class="caret"></i></a></li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 100%;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   padding: 12px 16px;
   z-index: 5;
   border: 1px solid #c6c6c6;
 }

 #nav-container ul li.dropdown .dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   display: none;
 }

 #nav-container ul li.dropdown:hover .dropdown-content {
   display: block;
 }

In this css #nav-container ul li.dropdown:hover .dropdown-content when you are writing .dropdown-content after #nav-container ul li.dropdown it means that .dropdown-content is child element of #nav-container ul li.dropdown that's why we need to put it in services <li> to let it act as a child.

this is what I did also.. but I was having a hard time for the div the have width of the ul — Sam Teng Wong, Jun 02 '16 at 09:38
yes, because it is absolute.. but can easily be fixed using media query... thanks though.. — Sam Teng Wong, Jun 02 '16 at 09:44

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

add a class to the service like

 <li><a href= "javacsript:(0)" class="service">Services <i class="caret"></i></a></li>

On hover of this class , set css diplay of the dropdown-content to block or anything

you can refer here

On a CSS hover event, can I change another div's styling?

edited May 23 '17 at 11:58

Community

1
1

answered Jun 02 '16 at 09:31

Arun Prasad E S

9,489
8
74
87

score 0 · Answer 3 · answered Jun 02 '16 at 09:45

first put that that targeted dropdown div next to the anchor do you want to hover, then give that anchor unique id for more easy to access example id='service' likr this:

<a id="service" href= "javacsript:(0)">

. then access that anchor with id like this to set hover style:

#service:hover + .dropdown-content {
    display: block; 
}

you can see the Fiddle here :https://jsfiddle.net/qz86zauu/

I hope this help.

score 0 · Answer 4 · answered Jun 02 '16 at 09:47

You can easily achieve this using :target.

You can put all your divs into .target and display them based on fragment identifier (hash) using :target `pseudo-class

. It doesn't move the contents betweendivs`, but I think the effect is close to what you wanted to achieve.

See how its done

.dropdown-content div{
    background-color: #f9f9f9;
    width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 5;
    border: 1px solid #c6c6c6;
}


#nav-container ul:hover .dropdown-content {
    display: block; 
}

.target > div {
    display:none;
}


.target > div:target{
    display:block;
}

<div id="Navigation">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="nav-container">
                    <ul>
                        <li><a href= "#home" class="home" >Home</a></li>
                        <li><a href= "#services" class="services">Services <i class="caret"></i></a></li>
                        <li><a href= "#categories" class="categories">Categories <i class="caret"></i></a></li>
                        <li><a href= "#shop" class="shop">Shop <i class="caret"></i></a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row dropdown-content target">
     <div id="home" class="col-md-12">
       <p>Hello Home!</p>
    </div>
    
    <div id="services" class="col-md-12">
       <p>Hello services!</p>
    </div>
  
   <div id="categories" class="col-md-12">
       <p>Hello categories!</p>
    </div>
</div>

show div element when another element is being hover

4 Answers4