如何使用jquery在鼠标悬停时显示div？

Question

我有jsfiddle演示 。

我想显示特定悬停的特定div悬停。 我也做了函数，它将在悬停时显示div，但是不起作用。

我很困惑如何为每个标签创建一个功能。 现在，我只为此做了一个功能。

代码：

<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();
    });
});

Answer 1

我已经更新了你的小提琴。

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

变了

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

至

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

这将为您工作。

Answer 2

向所有锚元素（例如cart添加一个通用类，然后添加另一个附加data-*以指定要显示的元素的选择器

尝试

<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>

然后

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

演示： 小提琴

Answer 3

您可以尝试以下方法：

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

的CSS

div {
display: none;
}

a:hover + div {
display: block;
}

Answer 4

只需使用：

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

演示： 小提琴

Answer 5

我只喜欢CSS ...

假设使用以下标记的HTML4：

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

您可以执行以下操作：

div {
    display: none;
}

a:hover + div {
    display: block;
}

演示 ： http : //jsfiddle.net/z6tL9

Answer 6

我刚刚更新了您的小提琴http://jsfiddle.net/K2RAt/4/

只需要$(".laptop").show();

Answer 7

工作小提琴 ：

[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]

Answer 8

您可以使用目标Div ID将自定义属性放在锚标记中，如下所示：

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

然后使用以下脚本：

$(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();
              });
});

这是演示： http : //jsfiddle.net/jn9eT/1/

希望能解决您的问题。

Answer 9

向所有锚元素（例如购物车）添加一个通用类，然后添加另一个附加数据-*以指定要显示的元素的选择器

尝试这个 ： -

<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>

然后 ： -

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

显示此演示

Answer 10

您可以使用：-

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