CODEWITHSUNDEEP
jqueryhtmlcss
DRY
DRY

Reputation: 13

jquery hover div and show another div then keep that div open

I'd really appreciate if someone can help me.

i just want to hover a div and show another div then i want to hover that div but that div still open

Code snippet: 

$(function(){
	$('.navigation li').hover(
  	function(){
    	$('.navigation-dropdown').toggleClass('visible');
    }
    );
});
.navigation{
  color: #ffffff;
  background-color: #000000;
  height: 20px;
  width: 100%;
}
.navigation li{
  display: inline-block;
}
.navigation-dropdown{
  background-color:red;
  display: none;
}
.visible{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <a href=""><li>home</li></a>
    <a href=""><li>about</li></a>
    <a href=""><li>contact</li></a>
  </ul>
</div>
<div class="navigation-dropdown">
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>

https://jsfiddle.net/7okx2Lrx/7/

Upvotes: 0

Views: 210

Answers (5)

Alisher Gafurov
Alisher Gafurov

Reputation: 447

You need make some changes in the code. One of the variant would be:

$(function(){
  $('.navigation li').hover(
    function(){
      $('.navigation-dropdown').addClass('visible');
    }
  );
  $('.navigation-dropdown').hover(function(){}, function(){
    $(this).removeClass('visible');
  }) 
});

https://jsfiddle.net/7okx2Lrx/11/

Upvotes: 1

xeno
xeno

Reputation: 42

Do you mean something like this?

I did it without javascript.

With the "+" you can select the next element on the same level.

.navigation:hover + .navigation-dropdown, .navigation-dropdown:hover{
    display: block;
}

And removed the margin from the ul

ul{margin: 0;}

https://jsfiddle.net/7okx2Lrx/10/

Upvotes: 0

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

Change .toggleClass('visible') to .addClass('visible'):

$(function(){
	$('.navigation li').hover(
  	function(){
    	$('.navigation-dropdown').addClass('visible');
    }
    );
});
.navigation{
  color: #ffffff;
  background-color: #000000;
  height: 20px;
  width: 100%;
}
.navigation li{
  display: inline-block;
}
.navigation-dropdown{
  background-color:red;
  display: none;
}
.visible{
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <a href=""><li>home</li></a>
    <a href=""><li>about</li></a>
    <a href=""><li>contact</li></a>
  </ul>
</div>
<div class="navigation-dropdown">
  <ul>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
    <li><img src="" alt=""></li>
  </ul>
</div>

Upvotes: 0

Thomas Rbt
Thomas Rbt

Reputation: 1540

The hover work only when the mouse is on the element. Your should put your second element IN the first one, then when you will hover the second element, you will stay in the first one.

Working example: https://jsfiddle.net/7okx2Lrx/8/ I removed the height and the vertical margins:

.navigation ul {
  margin-top: 0;
  margin-bottom: 0;
}

Upvotes: 0

Jaspreet Singh
Jaspreet Singh

Reputation: 1762

Change below code

$('.navigation-dropdown').toggleClass('visible');

to

$('.navigation-dropdown').addClass('visible');

Upvotes: 1

Related Questions