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

Question

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

页面加载状态：

悬停状态：

鼠标移出时的状态：

这是代码片段：

$(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

这是因为您将函数的输入和输出混入了一个。因此，您的第二个函数（我假设）应该在鼠标移出时调用，但从未被调用。

您应该从第一个函数中解包该函数并将其作为 .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）：

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

Answer 2

建议：

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

示例：

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

编辑：

也许您可以将所有图像变形到 div 元素中。
然后你可以使用

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

获取其children.

然后循环浏览图像并添加悬停事件

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

JQuery Hover Method - Out function is not working

javascript

css

jquery

hover

jquery-hover