Question

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

这里是我的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
}

Answer 2

类选择器以.

开头

您有一个类型选择器，并且正在尝试匹配<kunden-item> 元素。

你应该：

$(".kunden-item")

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

Answer 3

你在kunden-item之前错过了一个点（。）。你也可以使用.hover（），它的工作方式如下：

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

JQuery悬停不起作用

3 个答案: