Javascript Jquery更改悬停时的不透明度

我正在使用引导导航创建一个导航框。它有两个列表项。当用户单击其中一个时，我希望另一个淡出，以清晰的方式向用户显示所选内容

我还想做的是添加一个悬停函数，这样当您将鼠标悬停在淡出的列表项上时，不透明度将恢复为完全不透明度

我的Javascript不是最好的，下面是我用来获得淡出的代码，也许这本身可以改进

HTML:

---

您可以像这样使用css3动画

$（“.fader”）。单击（函数（）{
$（this.removeClass（'fade'）；
$（this.sides（）.addClass（'fade'）；
});
.fader{
过渡：所有1；
}
.fader.fade{
不透明度：.2；
}
音量控制器：悬停{
不透明度：1
}






您可以使用css和伪类
实现这一点！重要信息


！重要提示
是一种坏习惯。它所做的是改变任何样式，或者换句话说，它比内联样式“更强”

因此，让我们假设您有
CSS
规则，这些规则被
Javascript内联样式
规则覆盖，您可以使用
再次覆盖这些规则！重要信息

如果它仍然应该褪色：

你没有要求这个，但这里有一个更新的JS，你可能会喜欢。它也一样：玩一玩：

您可以使用“transition”，然后将其放在“cliked”“notClicked”类中。并使用javascript更改类

单击其中一个时，将其类更改为“clicked”，并将另一个类传递为“notClicked”


a：悬停{
过渡：所有800ms-0；
颜色：rgb（255,88,0）；
}
我的文本
我已经尝试过这样做，出于某种原因，即使有重要的标记，它也会忽略伪标记class@WebblyBrown更新了几次答案。您可能希望更改如下：
.fade:hover{opacity:1！important；}
在样式的第684行之后。css@WebblyBrown你必须检查（用firebug调试）如果你添加了一些CSS规则的类，你需要覆盖它们中的每一个。。。（如果你的代码是干净的，虽然它只在一个地方）我可以看到这样的作品在小提琴上，但我不能让它在我的网站上运行，不确定why@WebblyBrown一个原因可能是有一些其他的css正在扰乱我们的工作rules@WebblyBrown尝试将其他相关css规则复制到小提琴上
<ul  class="nav nav-pills">
    <li class="fadeWorker">
        <a  href="#1a" data-toggle="tab" id="worker">
            <img src="img/worker.png" alt="" />
            <span>I AM A WORKER</span>
        </a>
    </li>
    <li class="fadeAgency">
        <a href="#2a" id="agency" data-toggle="tab">
            <img src="img/agency.png" alt="" />
            <span>I AM AN AGENCY</span>
        </a>
    </li>
</ul>

$( "#worker" ).click(function() {
    $( ".fadeAgency" ).fadeTo( "slow" , 0.2, function() {
    });
    $( ".fadeWorker" ).fadeTo( "fast" , 1, function() {
    // Animation complete.
    });
});

$( "#agency" ).click(function() {
    $( ".fadeWorker" ).fadeTo( "slow" , 0.2, function() {
    });
    $( ".fadeAgency" ).fadeTo( "fast" , 1, function() {
        // Animation complete.
    });
});

.fadeWorker:hover,
.fadeAgency:hover{
    opacity: 1 !important;
}

.fadeWorker:hover,
.fadeAgency:hover{
    opacity: 1 !important;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

$( "ul.nav-pills li" ).click(function() {
    $( "ul.nav-pills li" ).not(this).fadeTo( "slow" , 0.2, function() {});
    $(this).fadeTo( "fast" , 1, function() {
        // Animation complete.
    });
});