JQuery 悬停方法 - 输出功能不起作用

Question

我正在使用 JQuery 在图像上应用悬停效果。

页面加载状态：

悬停状态：

鼠标移出状态：

这里是代码sn-p：

$(document).ready(function(){
    $(".image-container").hover(function() {
    $(this).parents().children().children('.image-01').css({'background-color':'#D4E619', 'opacity': '0.5'}),
   
 (function() {
    $(this).parents().children().children('.image-01').css({'background-color':'#FFFFF','height':'0', 'opacity': '0', 'visibility' :'hidden'});
    });
});
});

我尝试了几个 css 指令，但图像保持悬停状态。

编辑：

最终目标是在网格内的多个图像上使用不同的悬停颜色。网格的所有元素都具有相同的类名。

我使用第一个 JQuery 函数来附加类名，然后在某些图像上生成特定的悬停状态。

Answer 1

建议：

1. 对图像使用 id，这样可以降低 dom 复杂性。
2. 使用两个单独的事件（.hover 和 .mouseout）
3. 使用箭头函数而不是“函数”关键字

例子：

$(document).ready(()=>{
    $("#image-01").hover(()=>{
        /* css code for hover here */
    }
    $("#image-01").mouseout(()=>{
        /* css code for mouseout here */
    }
}

编辑：

1. 也许您可以在 div 元素中扭曲所有图像。
   然后就可以使用了

   让 images = $(' /* 容器 id */ ').children()

   得到它的孩子。

   然后只需遍历图像并添加悬停事件

Answer 2

这是因为您将输入和输出功能混合为一个。所以（我假设）应该在鼠标移出时调用的第二个函数永远不会被调用。

您应该从第一个函数中解开该函数并将其作为 .hover 的第二个参数

$(document).ready(function() {
  $(".image-container").hover(
    function() {
      $(this).parents().children().children('.image-01').css({
        'background-color': '#D4E619',
        'opacity': '0.5'
      })
    },
    function() {
      $(this).parents().children().children('.image-01').css({
        'background-color': '#FFFFF',
        'height': '0',
        'opacity': '0',
        'visibility': 'hidden'
      });
    }
  );
});

---

一些建议（很抽象，因为没有提供 HTML）：

1. 您可以通过查找最接近的唯一包装器然后找到所需的元素来降低选择器的复杂性：$(this).closes('.image-wrapper').find('.image-01')
2. 通过 JS 仅应用显示/不透明度。通过 CSS 设置元素显示时的规则，如果它不可见，则没有必要设置它的背景：$(this).[..].show(), $(this).[..].hide()
3. 我假设你可以用 css 做到这一点：.image-wrapper:hover .image-01{display: block;}