Jquery在悬停时改变不透明度答案

【问题标题】：Jquery change opacity on HoverJquery在悬停时改变不透明度
【发布时间】：2015-10-20 08:30:02
【问题描述】：

我正在使用 bootstrap nav-pills 创建一个导航框。它有两个列表项。当用户单击一个时，我希望另一个淡出以向用户清楚地显示选择了哪个。

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

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

HTML：

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

JAVASCRIPT

$( "#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.
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 css 和伪类 !important 来做到这一点

http://jsfiddle.net/tkmwx3q1/

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

!important 是个坏习惯。它所做的是改变任何样式，或者换句话说，它比内联样式“更强大”。

假设您的CSS 规则被Javascript inline-style 覆盖，您可以再次使用!important 覆盖这些规则

如果它仍然应该褪色：http://jsfiddle.net/tkmwx3q1/2/

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

你没有要求这个，但这里有一个你可能喜欢的更新的 JS。它也是一样的：玩一玩： http://jsfiddle.net/tkmwx3q1/1/

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

【讨论】：

我已经尝试过这样做，出于某种原因，即使使用重要标签它也会忽略伪类
@WebblyBrown 几次更新了答案。您可能会喜欢这些更改
也许是这样：.fade:hover {opacity: 1 !important;} 在 style.css 中的第 684 行之后
@WebblyBrown 你必须检查（用 firebug 调试）如果你添加了带有一些 CSS 规则的类，你需要覆盖它们中的每一个......（如果你的代码是干净的，尽管它只会是在一个地方）

【解决方案2】：

你可以像使用css3动画

$(".fader").click(function() {
  $(this).removeClass('fade');
  $(this).siblings().addClass('fade');
});

.fader {
  transition: all 1s;
}
.fader.fade {
  opacity: .2;
}
li.fader:hover {
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<ul class="nav nav-pills">
  <li class="fader">
    <a href="#1a" data-toggle="tab" id="worker">
      <img src="img/worker.png" alt="" /><span>I AM A WORKER</span>
    </a>
  </li>
  <li class="fader">
    <a href="#2a" id="agency" data-toggle="tab">
      <img src="img/agency.png" alt="" /><span>I AM AN AGENCY</span>
    </a>
  </li>
</ul>

【讨论】：

我可以看到这样在小提琴上工作，但我不能让它在我的网站上运行，不知道为什么
@WebblyBrown 1 原因可能是其他一些 css 破坏了我们的规则
@WebblyBrown 尝试将其他相关的css规则复制到fiddle

【解决方案3】：

你可以使用“transition”，然后把它放在“cliked”“notClicked”类上。并用 javascript 更改类。

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

a:hover {
    transition: all 800ms ease 0s;
    color:rgb(255,88,0);
}

&lt;a&gt;my text&lt;/a&gt;

【讨论】：