jQuery - 悬停 CSS 元素 1 更改元素 2

Question

我有两个元素:

.navAbout
#slider

将鼠标悬停在 .navAbout(A 标签)上时，我需要 (div) #slider 的边框颜色更改为特定颜色。 mouseOut 后，我​​需要 #slider 恢复到其原始 CSS 声明。

我已经尝试了几个代码。这是我最近的:

<script>
      $(".navAbout").hover(function () {
        $("#slider").css({'border-color' : '#3bc624'});
      }, function () {
        var cssObj = {
          'border-color' : '#3bc624',
        }
        $("#slider").css(cssObj);
      });
</script>

感谢您的帮助!

Answer 1

这样的事情应该有帮助:

JS

$(".navAbout").hover(function () {
    $("#slider").addClass("coloured-border");
}, function () {
    $("#slider").removeClass("coloured-border");
});

CSS

.coloured-border {
    border-color: orange
}