jQuery - 悬停CSS元素1改变Elevement 2 [英] jQuery - Hover CSS Element 1 change Elevement 2

问题描述

我有两个元素：

  .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> 
  

感谢您的帮助！

解决方案

类似这样的应用程序应该有所帮助：

JS

  $（。navAbout）。hover（function（）{
 $（＃slider）。addClass（colored-border）; 
}，function（）{
 $（＃slider）。removeClass（colored-border）; 
}）; 
  

CSS

  .coloured-border {
 border-color：orange 
} 
  

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!

解决方案

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改变Elevement 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！