CODEWITHSUNDEEP
javascriptjqueryhtml
Mustafa Temel
Mustafa Temel

Reputation: 65

jQuery this selector in the object

$(".paketler").hover(function() {
  $(".paketfav").addClass("paketfavhover");
}, function() {
  $(".paketfav").removeClass("paketfavhover");
});
<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>

For example When I came on first <div> the class paketfavhover should be applied to it's child .paketfav.

When I came on second <div> ONLY second .paketfav addClass ("paketfavhover").

So that in itself should be changed

Upvotes: 2

Views: 32

Answers (1)

Tushar
Tushar

Reputation: 87203

You don't need jQuery for that, use CSS :hover pseudo-class

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

If you still want to use jQuery(not convinced with CSS :hover), you can use 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>

As an option to context selector, you can also use find() or children()

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

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

Upvotes: 1

Related Questions