點擊時保持在懸停狀態

我正在完成一個網站，其代碼部分由未完成工作的自由職業者完成。我已經解決了幾乎所有的問題，但我被困在這一個。點擊時保持在懸停狀態

測試網站是here。

我希望頂部的按鈕（PT-EN）保持懸停狀態（白色），具體取決於我們所在的語言網站。很多導航菜單項在選中時保持白色。

在此先感謝！

編輯：

我想要做的基本上是複製它在導航菜單做什麼是這樣的：

HTML說：

<div class="fright text"> 
      <ul> 
       <li class="active"><a href="baga.html">baga</a></li> 
       <li><a href="portfolio_thumbnai.html"> portfolio</a></li> 
      </ul> 
      <ul> 
       <li><a href="clientes.html">clientes</a></li> 
       <li><a href="contactors.html"> contactos</a></li> 
       <li><a href="news.html"> news</a></li> 
      </ul> 
     </div>

CSS說：

.head .text{ 
    text-transform:uppercase; 
    padding-top: 72px; 
    font-size: 25px; 
    text-align:right; 
    margin-right:-1px; 
    line-height:26px; 
} 
.head .text ul{ 
    padding:0px; 
    margin-top:-5px 
} 
.head .text ul li{ 
    display:inline; 
} 
.head .text ul li a{ 
    text-decoration:none; 
    color: #fff; 
    opacity: 0.3; 
    font-family: DIN-Light; 
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */ 
} 
.head .text ul li.active a{ 
    color:#fff; 
}

目前頂部按鈕的做法是這樣的：

HTML

<div class="top-head"> 
     <ul> 
     <li class="active"><a href="#">pt</a></li> 
     <li> - <a href="en/index.html">en</a></li> 
     </ul> 
     </div>

CSS

.top-head{ 
    text-align:right; 
    text-transform:uppercase; 
    padding-top:20px; 
    font-size:11px; 
    font-family: DIN-Light; 
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */ 
} 
.top-head ul li{ 
    display:inline; 
} 
.top-head ul li a{ 
    text-decoration:none; 
    color: #fff; 
    opacity: 0.3; 
    font-family: DIN-Light; 
    -webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */ 
} 
.top-head ul li.active a{ 
    color:#fff; 
    opacity: 1; 
}

結果是雖然PT按鈕保持白色，當我們進入頁面，如果我們再次懸停在其上的白色消失。

來源

2012-06-13 user1453771

您可以根據DOM事件更改按鈕的類別。使用我的首選jQuery，我建議看看this。

來源

2012-06-13 14:11:27

非常感謝傑里米的快速反應，但我並不熟悉jQuery。我甚至在綠色CSS說實話:)順便說一句，我已經編輯了這個話題。 – user1453771

用純CSS做這件事是不可能的。 CSS檢查條件，而不是歷史。你需要監聽一個事件（鼠標懸停），然後改變狀態，使其不會回頭。 jQuery提供了一個很好的方法來做到這一點，但有其他的庫可以做同樣的事情。 –

再次感謝傑里米。我將不得不玩jQuery有點:) – user1453771

的問題是您在JavaScript中：

$(".text-top a,.menu-div a,.top-head a,.blog ul li a,.mapa a, input[type=button],input[type=submit]").live("mouseout", function() { 
    if(!$(this).hasClass('active')) { 
     $(this).stop(); 
     $(this).animate({ 
      opacity: 0.3 
     }); 
    } 
});

它淡出鼠標移開時的元素，除非特定元素具有積極的類。您的站點不會將活動類應用於語言鏈接......它將活動類應用於<li>容器。

來源

2012-06-13 15:47:31

謝謝史蒂夫！我如何將活動類應用於語言鏈接？很明顯，

是不夠的。 – user1453771

我用jQuery解決了這個問題，並且調整了現有的.js腳本。謝謝史蒂夫;） – user1453771

點擊時保持在懸停狀態

回答

相關問題