CODEWITHSUNDEEP
javascriptjquerycssmouseover
user3145373 ツ
user3145373 ツ

Reputation: 8156

How to Display a div on mouse-over using jquery ?

I have jsfiddle demo.

I want to show specific div hover of specific hover. I have made function also in that will show div on hover but it's not working.

and I am confused that how to make one function for each tag. right now I have made only one function for that.

Code :

<a class="cart" href="#"> show </a><br>
<a class="cart1" href="#"> show1 </a><br>
<a class="cart2" href="#"> show2 </a><br>

<div class="laptop" style="position: absolute;z-index: 1;">
    laptop
</div>
<div class="mobile" style="position: absolute;z-index: 1;">
    mobile
</div>
<div class="shoes" style="position: absolute;z-index: 1;">
    shoes
</div>

CSS :

.laptop{
    display: none;              
    min-height: 400px;
    width: 400px:
    position:absolute;
    background-color: black;               
}
.mobile{
    display: none;                  
    min-height: 200px;
    width: 200px:
    position:absolute;
    background-color: blue;            
}
.shoes{
    display: none;                  
    min-height: 300px;
    width: 200px:
    position:absolute;
    background-color: red;             
}

JS :

$(document).ready(function () {
    $(document).on('mouseenter', '.cart', function () {                       
        $(this).next(".laptop").show();

    }).on('mouseleave', '.cart', function () {
        $(this).next(".laptop").hide();
    });
});

Upvotes: 1

Views: 9802

Answers (10)

user3115056
user3115056

Reputation: 1280

You can rather use: - 

$(document).ready(function () {     
     $('.cart').hover(function(){
           $(".laptop").show();
     })
 });

Upvotes: 1

Tejas
Tejas

Reputation: 467

Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed

Try this : - 

<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>

then after : - 

$(document).ready(function () {
    $(document).on('mouseenter', '.cart', function () {
        $($(this).data('target')).show();
    }).on('mouseleave', '.cart', function () {
        $($(this).data('target')).hide();
    });
});

Show this demo

Upvotes: 1

earthmover
earthmover

Reputation: 4525

Simply use:

 $( ".cart1" ).mouseover(function(){
       $('.laptop').show();
    });

Demo: Fiddle

Upvotes: 2

A Paul
A Paul

Reputation: 8261

I have updated your fiddle.

http://jsfiddle.net/K2RAt/1/

changed 

$(this).next(".laptop").hide();

to 

$(".laptop").hide();

This will work for you.

Upvotes: 6

Nishu Tayal
Nishu Tayal

Reputation: 20880

You can put a custom attribute in anchor tag with target Div Id like :

<a class="cart" href="#" target_id='laptop'> show </a><br>

And then use following script : 

$(document).ready(function () {
            $(document).on('mouseenter', '.cart', function () {                       
              var cl  = $(this).attr('target_id');
                jQuery('div.'+cl).show()
              }).on('mouseleave', '.cart', function () {
                 var cl  = $(this).attr('target_id');
                   jQuery('div.'+cl).hide();
              });
});

Here is the demo : http://jsfiddle.net/jn9eT/1/

Hope, it solves your problem.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed

Try

<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>

then

$(document).ready(function () {
    $(document).on('mouseenter', '.cart', function () {
        $($(this).data('target')).show();
    }).on('mouseleave', '.cart', function () {
        $($(this).data('target')).hide();
    });
});

Demo: Fiddle

Upvotes: 4

Lijo
Lijo

Reputation: 6788

Working Fiddle : 

[HTML:

<ul id="menu" class="menu">
  <li>
      <a href="">Home</a>
  </li>
  <li id="menu1" class="menu-link">
      <a href="/">LINK1</a>
      <div id="menu1content" class="menuDescription">
        Description for "menu1"
      </div>
  </li>
  <li id="menu2" class="menu-link">
      <a href="/">LINK2</a>
      <div id="menu2content" class="menuDescription">
         Description for "menu2"
      </div>
  </li>
  <li id="menu3" class="menu-link">
      <a href="/">LINK3</a>
      <div id="menu3content" class="menuDescription">
         Description for "menu3"
      </div>
    </li>
  <li id="menu4" class="menu-link">
      <a href="/">LINK4</a>
      <div id="menu4content" class="menuDescription">
         Description for "menu4"
      </div>
    </li>
</ul>
CSS:

.menu{
    font-family: 'LeagueGothicRegular';
    position: absolute;
    top:25px;
    overflow:hidden;
    right:100px;
    float:right;

}
.menu ul{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
.menu li{
    float:left;
    margin: 0 5px;
    position:relative;
    overflow:hidden;
    width: 120px;
    height: 30px;
}
.menu li a{
    position: absolute;
    bottom: 0;
}

.menu li .menuDescription {
    display: none;
}

.menu li:hover .menuDescription {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
}

.menuDescription  {
    font-size: 11px;
    color: rgb(0, 0, 0);
}][2]

Upvotes: 1

Dan
Dan

Reputation: 294

I have just updated your fiddle http://jsfiddle.net/K2RAt/4/

Only need $(".laptop").show();

Upvotes: 2

Debajyoti Das
Debajyoti Das

Reputation: 2148

I prefer CSS only...

Assuming HTML4, with this markup:

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

You can do something like this:

div {
    display: none;
}

a:hover + div {
    display: block;
}

Demo: http://jsfiddle.net/z6tL9

Upvotes: 1

dotmido
dotmido

Reputation: 1384

You can try this :

<a>Hover</a>
<div>To be shown</div>

CSS

div {
display: none;
}

a:hover + div {
display: block;
}

Upvotes: 2

Related Questions