Jquery在懸停上更改不透明度

使用引導nav-pills創建導航框。它有兩個列表項。當用戶點擊其中一個時，我希望另一個淡出以顯示以清楚的方式選擇給用戶的內容。Jquery在懸停上更改不透明度

我還想做的是添加一個懸停功能，以便當您將鼠標懸停在淡出列表項上時，不透明度將恢復爲滿。

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

來源

2015-10-20 Webbly Brown

你可以做到這一點機智^ h CSS和僞類!important

http://jsfiddle.net/tkmwx3q1/

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

!important是一個壞習慣中。它所做的是改變任何樣式，換句話說，它比內聯樣式「更強」。

因此，可以說你有得到由Javascript inline-style規則，你可以用!important

再次改寫覆蓋，如果它仍然應該淡出你的CSS規則：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. 
    }); 
});

來源

2015-10-20 08:37:57 caramba

我已經試圖做到這一點，由於某些原因，即使使用重要的標籤，它也會忽略僞類 –

@WebblyBrown更新了幾次答案。你可能會喜歡這樣的變化 – caramba

：'.fade：hover {opacity：1！important;}'在樣式中的第684行之後。css – caramba

您可以使用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>

來源

2015-10-20 08:37:57

http://jsfiddle.net/arunpjohny/fma6fnj6/ –

我可以看到因此在小提琴的作品，但我不能讓它在我的網站上運行，不知道爲什麼 –

@WebblyBrown 1原因可能是有一些其他的CSS是搞亂我們的規則 –

您可以使用「過渡」，然後把這個「cliked」「notClicked」級。並使用JavaScript更改類。

當你點擊一個改變及一流的「點擊」，並通過另一種爲「notClicked」

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

<a>my text</a>

來源

2015-10-20 08:45:51 Fundhor

Jquery在懸停上更改不透明度

回答

相關問題