JQuery悬停不起作用

Question

我得到了一个JQuery悬停,但它没有显示.dimmed-item类是我想要添加到kunden-item类的内容.如果我把它们放进去的话,它们已经全部工作了.JQuery已经存在于File中,所以我必须犯一些逻辑错误.

这里我的1元素的HTML:

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

这是我的JQuery:

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

Answer 1

kunden-item是一个类,所以你的选择器需要一个领先的.:

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

另请注意,您可以使用hover()和大规模缩短代码toggleClass():

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

或者只使用CSS:

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