Question

我使用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.
    });
});

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

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

Answer 3

你可以使用＆＃34; transition＆＃34;，然后把它放在＆＃34; cliked＆＃34; ＆＃34; notClicked＆＃34;类。并使用javascript更改课程。

当您点击一个时，将其班级改为＆＃34;点击＆＃34;并将另一个传递给＆＃34; notClicked＆＃34;

＆＃13;

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

＆＃13;

<a>my text</a>

＆＃13;

Jquery在Hover上改变不透明度

3 个答案: