同一页面中的不同OnMouseEnter事件

Question

我有以下片段（由@SpencerWieczorek调整，谢谢）：

$('.parent').mouseenter(function(){
  $('.child').fadeToggle();
});

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 500px;
  margin: 10px 10px;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 500px;
  height: 100%;
  display: block;
  overflow: hidden;
}


p {
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

最终目标是运行多个实例，在同一页面中使用OnMouseEnter事件处理不同的元素。

我在考虑解决方案，但不确定是否可以更改父/子条款。可以定义多个父/子参数（例如，parent，parent1，parent2等也是child，child1，child2等）？

Answer 1

您可以使用当前元素中的".child"访问$(this).find('.child')。这样它可以与其中几个一起使用：

$('.parent').mouseenter(function(){
  $(this).find('.child').fadeToggle();
});

＆＃13;

＆＃13;

$('.parent').mouseenter(function(){
  $(this).find('.child').fadeToggle();
});

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 500px;
  margin: 10px 10px;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 500px;
  height: 100%;
  display: block;
  overflow: hidden;
}


p {
  padding: 1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

＆＃13;

＆＃13;

＆＃13;