0

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

我试图在单击该 div 时更改最后一个子 div 元素的 css :hover 属性。更具体地说，我有一个导航栏 div，里面有一些子 div 按钮。子 div 都是同一个类的一个部分，因此当我将鼠标悬停在它们上时……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");
    }   
});

任何帮助表示赞赏。

4

3 回答 3

4

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

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

于 2013-04-02T18:04:42.097 回答
0

正如 Adeneo 所说，您不能:hover在 jQuery 中使用伪选择器（如 ）。如果你想在 jQuery 中附加一个悬停事件，你可以使用类似下面的东西：

$("#myElement").on('hover', function() {
    alert("I've been hovered over!");
});
于 2013-04-02T18:06:04.900 回答
0

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

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";
}
于 2013-04-02T18:16:30.567 回答