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
}

Answer 2

这应该是你正在尝试的方法

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

但answer of @jakeclarkson是解决问题的正确概念方法。

Answer 3

试试这个

$(".navAbout").hover(
    $("#slider").toggleClass('borderColor');
});

定义具有所需边框颜色的类

.borderColor
{
    border-color: #FF0000;
}

Answer 4

您的方法可行，但您两次都将颜色设置为相同的颜色。

另外，我不确定你是只是在两种颜色之间交替，还是#slider的颜色设置在不同的地方，可能是任何颜色。如果它可能是任何东西，那么你需要检查它是什么并保存它，以便你可以将颜色设置回原来的颜色。

理想情况下，您只需更改类like jakeclarkson suggests above并避免在javascript / css中保留样式信息。

See this!

<强> HTML：

＆lt; a class =“navAbout”＆gt;将鼠标悬停在我身上＆lt; / a＆gt; ＆lt; div id =“slider”＆gt;而且我会的变化＆LT; / DIV＆GT;

<强> JavaScript的：

var originalColor ='';

$（ “navAbout”）。悬停（函数（事件）{
   originalColor = $("#slider").css("border-color");
   $("#slider").css("border-color", "#3bc624");
}，功能（事件）{
   $("#slider").css("border-color", originalColor); 
} ）;

读：

http://api.jquery.com/hover/

http://api.jquery.com/css/

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

4 个答案: