JQuery hover doesnt work

Bono Published at Dev

Bono

I got a JQuery hover but it doesnt show. The dimmed-item class, is what I would like to add on to the kunden-item class. Bouth of them allready work if I manuely put them in. JQuery is allready in the File so there must be some logic mistake I made.

Here my HTML for 1 Element:

<div class="kunden-item kunde2-item">
  <img class="kunde" src="<?php echo $params->get('image2');?>" alt="Kunde">
</div>

Here my JQuery:

$(document).ready(function(){ 
$("kunden-item")
  .mouseenter(function() {
    $(this).addClass("dimmed-item");
  })
  .mouseleave(function() {
    $(this).removeClass("dimmed-item");
  });
});

Rory McCrossan

kunden-item is a class, so your selector needs a leading .:

$(".kunden-item")
    .mouseenter(function() {
        $(this).addClass("dimmed-item");
    })
    .mouseleave(function() {
        $(this).removeClass("dimmed-item");
    });
});

Also note that you can massively shorten your code by using hover() and toggleClass():

$(".kunden-item").hover(function() {
    $(this).toggleClass('dimmed-item');
});

Or just by using CSS alone:

.kunden-item:hover {
    opacity: 0.5; // for example only, apply whatever style you need here
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-20

Comments

0 comments

From Dev