Question

由于我有动态添加的内容，我需要使用“document”作为我的活动的选择器。

$(document).hover(function(){
  //Do something
}

现在我想知道我是否也可以使用班级作为选择器？我试过了：

$(document).hover('.liDoc', function(){
    $(this).children('.delDoc').css('color', 'red'); console.log($(this).children('.delDoc'))
}, function() {
    // on mouseout, reset the background colour
    $(this).children('.delDoc').css('color', '');
});

这个不起作用！似乎整个文件都是目标使用.on()时，我可以这样做......但.on('hover')已被弃用？！

Answer 1

您需要委派mouseenter/mouseleave个事件并按类型事件过滤，例如：

$(document).on('mouseenter mouseleave', '.liDoc', function(e) {
  $(this).children('.delDoc').css('color', e.type === "mouseenter" ? 'red' : '');
});

但你最好切换一个类：

$(document).on('mouseenter mouseleave', '.liDoc', function(e) {
  $(this).children('.delDoc').toggleClass('colored');
});

用CSS：

.delDoc.colored {
  color: red;
}

如果您的用例很简单，那么只需使用CSS：

.liDoc:hover > .delDoc {
  color: red;
}

Answer 2

请尝试以下代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).css("background-color", "yellow");
        }, function(){
        $(this).css("background-color", "pink");
    });
});
</script>
</head>
<body>

<p>Hover the mouse pointer over this paragraph.</p>

</body>
</html>

Answer 3

您可以直接使用班级名称作为选择器。

当然，首先需要导入jQuery库才能实现。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min"></script>

如果您已经下载了jQuery库（推荐），那么“src”值应该导致该文件。如果没有，您可以直接使用上面的URL引用它。

现在，您的jQuery代码

<script>
    $(document).ready(function(){
        $(".liDoc").hover(function(){
            //mouse is in.. Do something
            $(this).children(".delDoc").css("background","red");
        }, function(){
            //mouse is out.. Do something
            $(this).children(".delDoc").css("background","transparent");
        });
    });
</script>

如何使用文档AND类作为Jquery .hover（）的选择器

3 个答案: