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

Question

我有jsfiddle demo。

我想显示特定悬停的特定 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

你可以使用：-

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

Answer 3

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

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

Answer 4

为所有锚元素添加一个公共类，例如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();
    });
});

演示：Fiddle

Answer 5

你可以试试这个：

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

CSS

div {
display: none;
}

a:hover + div {
display: block;
}

Answer 6

简单使用：

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

演示：Fiddle

Answer 7

我只喜欢 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 8

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]

Answer 9

您可以将自定义属性放在带有目标 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 10

为所有锚元素（如购物车）添加一个公共类，然后添加另一个额外的 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();
    });
});

Show this demo