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

【问题标题】：jQuery - Hover CSS Element 1 change Elevement 2jQuery - 悬停 CSS 元素 1 更改元素 2
【发布时间】：2011-12-15 21:54:12
【问题描述】：

我有两个元素：

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

感谢您的帮助！

【问题讨论】：

看起来差不多正确。你有什么问题？
但是你对这两个事件使用相同的颜色..

标签： jquery css hover

【解决方案1】：

这样的事情应该会有所帮助：

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

CSS

.coloured-border {
    border-color: orange
}

【讨论】：

是的，使用类是一种非常优越的方式——它是语义化的，这意味着未来的样式更改只需要在您的样式表中进行。好东西。
谢谢！我什至没有想过要操纵班级！伟大的走近。今晚晚些时候我会试试这个，但我 100% 它会工作的。谢谢大家。
理论上，这应该可行，但事实并非如此。我已经仔细检查了类/ID 的准确性，并稍微弄乱了代码。也没有级联问题。难住了。 link@jakeclarkson
我确定你现在已经找到了，但它是导航。目的是让边框与导航链接的悬停一起悬停，以便整个框变成悬停项的颜色。
谢谢，我明白你的意思了。我认为你的风格需要!important。看看这个jsFiddle我已经敲了；它也可能给你一些关于 JS 实现的想法。

【解决方案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 是解决问题的正确概念方法..

【讨论】：

【解决方案3】：

试试这个

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

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

.borderColor
{
    border-color: #FF0000;
}

【讨论】：

【解决方案4】：

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

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

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

See this!

HTML：

悬停在我身上

我会改变

JavaScript：

var originalColor ='';

$(".navAbout").hover(函数(事件){
   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/

【讨论】：