How to show and hide div on hover of li element?

Question

0.00/5 (No votes)

See more:

I have four li elements, I want to show div and hide it on hover of two li elements only.
here is my code

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}
#first:hover
{
background-color: red;
}
#second:hover
{
background-color: red;
}

</style>

<script type="text/javascript">
$('#first li').hover(function(){
     $('.div1', this).show();  //find the div INSIDE this li
},function(){
     $('.div1', this).hide();
});;

</script>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li id="first"><a href="#news">News</a></li>
  <li id="second"><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div class="div1"   style="Width:200px;height:150px;border:2px solid black;display:none;">asd</div>
<div class="div2" style="Width:200px;height:50px;border:2px solid black;display:none;">sgtargewarasd</div>
</body>
</html>

Posted 20-Nov-15 22:37pm

Hussain Javed

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sarath kumar.N · Answer 1 · 2015-11-20T23:00:00

Solution 1

Use mouseenter and leave instead of hover.

JavaScript

<script type="text/javascript">

   $('#first').mouseenter(function(){
     $('.div1').show(); 
  });
  $('#first').mouseleave(function(){
     $('.div1').hide(); 
  });


  $('#second').mouseenter(function(){
     $('.div2').show(); 
  });
  $('#second').mouseleave(function(){
     $('.div2').hide(); 
  });

</script>

An also find my fiddle for above solution: fiddle[^]

Posted 20-Nov-15 23:00pm

Sarath kumar.N

Comments

Hussain Javed 21-Nov-15 5:14am

I have tried this but its not working
here is my code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
.first:hover
{
background-color: red;
}
.second:hover
{
background-color: red;
}

</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">

$('#first').mouseenter(function(){
$('.div1').show();
});
$('#first').mouseleave(function(){
$('.div1').hide();
});

$('#second').mouseenter(function(){
$('.div2').show();
});
$('#second').mouseleave(function(){
$('.div2').hide();
});

</script>
</head>
<body>

<ul>
<li>Home</li>
<li id="first">News</li>
<li id="second">Contact</li>
<li>About</li>
</ul>
<div class="div1" style="Width:200px;height:150px;border:2px solid black;display:none;">asd</div>
<div class="div2" style="Width:200px;height:50px;border:2px solid black;display:none;">sgtargewarasd</div>
</body>
</html>

Hussain Javed 21-Nov-15 5:35am

If i hover on any li element the div contains another list of items,if mouseleave that element then that li element should not hidden.
If i hover another li element then first li element div should be hidden and second li element should be show.
for example you can see www.cloudingsystem.com

Sarath kumar.N 22-Nov-15 23:08pm

HI Javed I tried ur code it's working fine. I tried in jsfiddle. I suggest u to use developer tools in your browser to debug. Please check whether any error in ur code or jquery loaded fine. Thanks.

Anil Sharma1983 · Answer 2 · 2015-11-20T23:05:00

Solution 2

You can try this way

JavaScript

$(function() {
    
  <script type="text/javascript">
    $(function() {
    
$('li#first  ').hover(function(e){

     $('.div1').show();  //find the div INSIDE this li
},function(e){
 
 

if(e.relatedTarget.className !='div1')
{
     $('.div1').hide();
     }
});
 });
    </script>;

Posted 20-Nov-15 23:05pm

Anil Sharma1983

Updated 21-Nov-15 0:48am

v2

Comments

Hussain Javed 21-Nov-15 5:35am

ok i have tried your function.Its Working.
If i hover on any li element the div contains another list of items,if mouseleave that element then that li element should not hidden.
If i hover another li element then first li element div should be hidden and second li element should be show.
for example you can see www.cloudingsystem.com

Anil Sharma1983 21-Nov-15 6:50am

please check updated soultion