jQuery对象

Question

＆＃13;

＆＃13;

$(".paketler").hover(function() {
  $(".paketfav").addClass("paketfavhover");
}, function() {
  $(".paketfav").removeClass("paketfavhover");
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

例如 当我第一次来<div>时，课程paketfavhover应该应用于它的孩子.paketfav。

当我第二次来<div>时 只有第二个.paketfav addClass（＆＃34; paketfavhover＆＃34;）。

这样本身就应该改变

Answer 1

你不需要jQuery，使用CSS :hover伪类

.paketler:hover .paketfav {
    /* Hover styles here */
}

.paketler .paketfav {
  width: 20px;
  height: 20px;
  float: left;
  background: red;
  margin: 5px;
}

.paketler:hover .paketfav {
  background: green;
}

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

如果您仍想使用jQuery（不相信CSS :hover ），您可以使用jQuery context selector。

$(".paketler").hover(function () {
    $(".paketfav", this).addClass("paketfavhover");
}, function () {
    $(".paketfav", this).removeClass("paketfavhover");
});

$(".paketler").hover(function() {
  $(".paketfav", this).addClass("paketfavhover");
}, function() {
  $(".paketfav", this).removeClass("paketfavhover");
});

.paketfav {
  width: 20px;
  height: 20px;
  float: left;
  background: red;
  margin: 5px;
}
.paketfavhover {
  background: green;
}

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

作为上下文选择器的选项，您还可以使用find()或children()

$(this).find(".paketfav").addClass("paketfavhover");

$(this).children(".paketfav").addClass("paketfavhover");