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

jQuery - Hover CSS Element 1 change Elevement 2(jQuery - 悬停 CSS 元素 1 更改元素 2)

问题描述

我有两个元素:

.navAbout
#slider

.navAbout 是一个 A 标签，我需要将 (div) #slider 的边框颜色更改为特定颜色.在 mouseOut 时，我需要 #slider 恢复到其原始 CSS 声明.

On hover of .navAbout, which is an A tag, I need the border color of (div) #slider to change to a specific color. Upon mouseOut, I need #slider to revert back to its original CSS declaration.

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

I have tried several codes. Here's my most recent:

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

感谢您的帮助！

推荐答案

这样的东西应该会有所帮助:

Something like this should help:

JS

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

CSS

.coloured-border {
    border-color: orange
}

这篇关于jQuery - 悬停 CSS 元素 1 更改元素 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！