Question

您好我是一个新的jquery用户，我需要一些帮助。

我正在尝试在点击该div时更改最后一个子div元素的css：hover属性。更具体地说，我有一个nav-bar div，里面有一些子div按钮。子divs都属于同一个类，所以当我将鼠标悬停在它们上面时... border-width属性会发生变化。我想这样，当我点击最后一个子div时，边框颜色会改变，但仍然只显示鼠标悬停时......当我再次点击它时，我想在css中定义原始边框属性重拍效应。

以下是我正在尝试做的一个示例：

$("div.navbar:last").click(function(){    
    if ($("div#details").is(":hidden")){    
        $("div#details").fadeIn(100);    
        $("div.navbar:hover").css("border-bottom-color","#ee4444");
    } else {
        $("div#details").fadeOut(100);
        $("div.navbar").css("border-bottom-color","#88ddff");
    }   
});

感谢任何帮助。

Answer 1

您不能在jQuery中使用:hover选择器。您应该避免使用.css()方法，而是使用addClass，removeClass和toggleClass来更改DOM状态。

然后，实际的CSS可以接管并使用这些类作为样式挂钩来更改页面的呈现方式。

Answer 2

正如Adeneo所说，你不能在jQuery中使用伪选择器（如:hover）。如果你想在jQuery中附加悬停事件，你可以使用如下内容：

$("#myElement").on('hover', function() {
    alert("I've been hovered over!");
});

Answer 3

您可以将伪类放在您添加的辅助类上，单击

JS

  $("div.navbar:last").click(function(){    
    if ($("div#details").is(":hidden")){    
        $("div#details").fadeIn(100);    
        $("div.navbar").addClass("hoverBottom");
    } else {
        $("div#details").fadeOut(100);
        $("div.navbar").css("border-bottom-color","#88ddff");
    }  
    });

CSS

.hoverBottom:after {
  border-bottom-color","#ee4444";
}

如何在jquery中选择多个css属性？

3 个答案: