Question

目标很简单。当鼠标悬停在mydiv（灰色）上时，应该出现内部的div div。我正在尝试为此编写代码，但我能想到的最好的是显示所有内部div。只应显示子内部div。请帮我解决这个问题，我将不胜感激，谢谢：）

https://jsfiddle.net/wyeqgfjz/#&togetherjs=6wNtokkegm

HTML：

<div class="mydiv">
  <div class="inner"></div>
</div>

<div class="mydiv">
  <div class="inner"></div>
</div>

CSS：

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
}

jQuery的：

var inner = $('.mydiv .inner'),
  mydiv = $('.mydiv');
inner.hide();
mydiv.each(function() {
  $(this).on('hover', function() {
    $(this).find(inner).toggle();
  });
});

Answer 1

没有hover事件，您想要的事件是mouseenter和mouseleave。
但是，jQuery有一个hover()方法，可以为您组合事件。

请注意，您不必使用循环，jQuery会在内部为您进行迭代。

＆＃13;

var inner = $('.mydiv .inner'),
    mydiv = $('.mydiv');
    
inner.hide();

mydiv.hover(function() {
  $(this).find(inner).toggle();
});

＆＃13;

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
  <div class="inner"></div>
</div>

<div class="mydiv">
  <div class="inner"></div>
</div>

＆＃13;

Answer 2

根本不需要使用脚本。可以使用:hover伪选择器

单独使用css

.mydiv {
  background: #ccc;
  padding: 40px;
  margin-bottom: 40px;
}

.inner {
  background: red;
  padding: 40px;
  display:none;
}

.mydiv:hover .inner {
  display:block
}

<div class="mydiv">
  <div class="inner"></div>
</div>

<div class="mydiv">
  <div class="inner"></div>
</div>

JQuery每个方法都不起作用

2 个答案: