在另一個元素上懸停動畫後更改背景圖像

如果您將鼠標懸停在li元素上，我想在導航上方標記動畫。動畫（X翻轉）應該顯示另一個基於li的徽標，然後Xflip在不再關注時回到原來的位置。這個問題似乎是在li的埋在nav + ul和標誌是在範圍之外的div和連接作爲背景圖像的a（見下文）：在另一個元素上懸停動畫後更改背景圖像

<section id="header"> 
      <div class="logo"><a href="/"></a></div> 
      <nav> 
       <ul> 
        <li><a class="a" href="#">Link 1</a></li> 
        <li><a class="b" href="#">Link 2</a></li> 
        <li><a class="c" href="#">Link 3</a></li> 
        <li><a class="d" href="#">Link 4</a></li> 
       </ul> 
      </nav> 
</section>

我試着做一些像nav > ul > li:hover ~ .logo > a {..changebG..}但那不工作。有沒有一種CSS方法可以解決這個問題？

我也嘗試過JQuery，但遠不如此熟練。

來源

2013-12-18 Matt Schwarz

這個目前不能在CSS來完成爲沒有瀏覽器目前支持父方法 –

正如其他人所說的功能父選擇，在列表項徘徊，當你不能改變標識的背景。

但是，一個選項可能會在原始頂部放置不同的徽標？這隻適用於某些情況，例如徽標尺寸相同且不透明（因此您可以在下方看到其他徽標）。

您可以在<a>上創建一個僞元素，該元素會更改懸停時的不透明度，因此它會覆蓋原始徽標。

基本概念：

li a:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    width: 100px; 
    height: 50px; 
    opacity: 0; 
} 

li a:hover:before { 
    opacity: 1; 
} 

li a.a:before { 
    background: url("http://placehold.it/100x50/ff0000"); 
    top: 0; 
} 

li a.b:before { 
    background: url("http://placehold.it/100x50/000000"); 
    top: 0; 
} 

li a.c:before { 
    background: url("http://placehold.it/100x50/0066cc"); 
    top: 0; 
} 

li a.d:before { 
    background: url("http://placehold.it/100x50/ffffcc"); 
    top: 0; 
}

DEMO

來源

2013-12-18 22:57:40 davidpauljunior

非常感謝。你認爲在JQuery中做它會更乾淨，因爲我需要同時觸發動畫和交換圖像？不幸的是，徽標是不同的尺寸和透明度。只有他們的身高是一樣的。 –

我懷疑jQuery（或JavaScript）可能是一種不同的圖像。您只需根據哪個列表項懸停在標誌或標題div上切換一個類 – davidpauljunior

這不能用CSS3來完成。 CSS3不允許您基於子元素的懸停來引用父元素。你需要爲此使用JavaScript。

希望瀏覽器將很快支持是新CSS4文檔

來源

2013-12-18 22:35:40 koenpeters

有可能與新CSS4選擇這樣做會很快但是，瀏覽器支持現在非常小。還需要JavaScript而不是jQuery，jQuery只是一個JavaScript庫。 –

這是正確的。我改變了參考CSS3和JS的答案。 – koenpeters

在另一個元素上懸停動畫後更改背景圖像

回答

相關問題