JQuery hover不起作用

JQuery hover doesnt work

本文关键字：不起作用 hover JQuery      更新时间：2023-09-26

我有一个JQuery悬停，但它不显示。暗淡物品类，是我想添加到昆登物品类的。如果我把它们放进去，它们都已经工作了。JQuery在文件中已经准备好了，所以一定是我犯了一些逻辑错误。

这里是我的HTML 1元素:

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

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
}

以.开头的类选择器

你有一个类型选择器，并试图匹配<kunden-item> 元素。

你应该有:

$(".kunden-item")

你可以也许完全摆脱JS，只是在你的样式表中使用:hover规则

你在kunden-item前面少了一个点(.)。您还可以使用.hover()，其工作原理如下:

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