Question

出于某种原因，如果没有多次复制粘贴代码并且只是更改类的名称，我就无法工作。

我想要的是，这适用于同一页面上的所有类，但当然不是所有类同时使用，它应该仅适用于当前的悬停。

我知道这是可能的，但我似乎无法让它发挥作用。

所以我想要这段代码：

$(document).ready(function()
{
  $("div.hover").mouseover(function ()
  {
    $(this).css('cursor', 'pointer');
    $("div.overlay").css('visibility','visible');
    $("div.overlay").css('display','block');

  });
  $("div.hover").mouseout(function ()
  {
    $(this).css('cursor', 'default');
    $("div.overlay").css('visibility','hidden');
    $("div.overlay").css('display','none');
  });
});

处理所有＆＃34;悬停＆＃34;和＆＃34; overlay＆＃34;类，但只有当我将鼠标悬停在特定的类上时。任何帮助将不胜感激！

提前知道了！

Answer 1

使用CSS代替。在visibility: hidden旁边使用display: none也是多余的。

div.hover {
    cursor: default;
}
div.hover + div.overlay {
    display: none;
}

div.hover:hover {
    cursor: pointer;
}
div.hover:hover + div.overlay {
    display: block;
}

如果你真的想要你的JS工作，请使用.hover()和.next()。

$(document).ready(function() {
    $("div.hover").hover(function() {
        $(this).css('cursor', 'pointer');
        $(this).next("div.overlay").css('display','block');
    }, function() {
        $(this).css('cursor', 'default');
        $(this).next("div.overlay").css('display','none');
    });
});

Answer 2

试试这个

$("div.hover").hover(function() {
//On hover operations.
  $(this).css('cursor', 'pointer');
  $("div.overlay").css('visibility','visible');
  $("div.overlay").css('display','block');

}, function() {
//On hover out operations.
 $(this).css('cursor', 'default');
 $("div.overlay").css('visibility','hidden');
 $("div.overlay").css('display','none');
});

Javascript一个页面上所有类的脚本

2 个答案: