Question

I have two elements:

.navAbout
#slider

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>

Thanks for the help!

Answer 1

Something like this should help:

JS

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

CSS

.coloured-border {
    border-color: orange
}