CODEWITHSUNDEEP
javascriptjqueryhtml
Bono
Bono

Reputation: 181

JQuery hover doesnt work

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");
  });
});

Upvotes: 2

Views: 66

Answers (3)

Joost Verkaik
Joost Verkaik

Reputation: 31

You're missing a dot (.) before kunden-item. You can also use .hover(), which works like this:

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

Upvotes: 1

Quentin
Quentin

Reputation: 943163

Class selectors begin with a .

You have a type selector and are trying to match <kunden-item> elements.

You should have:

$(".kunden-item")

You can probably get rid of the JS entirely and just use a :hover rule in your stylesheet though.

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

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
}

Upvotes: 5

Related Questions