圖像過渡盤旋而另一個元素

我有一個學校項目，開展和我出的上，而同一頁內徘徊另一個元素（錨元素）如何在CSS褪色圖像的想法。圖像過渡盤旋而另一個元素

我使用的當前方法是使用：目標，而不是（：靶）選擇器。基本上，一個圖像在被定位時會褪色。

.home > img 
{ 
    opacity: 0; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    transition: all .5s ease 
} 

.home > img:target {opacity: 1;} 
.home > img:not(:target) {opacity: 0;}

但我敢肯定有一種方法可以做到這一點與懸停。

來源

2013-12-08 Karl TinKode

不透明度之間的延遲：0和不透明度：1。 –

如果錨和圖像都在HTML彼此相鄰，你可以這樣做：

.home a + .home img{ 
    opacity: 0; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    -ms-transition: all .5s ease; 
    transition: all .5s ease 
} 
.home a:hover + .home img{ 
    opacity:1; 
}

但HTML應該是這樣的：

<div class="home"> 
    <a href="#">Item</a> 
    <img src="whatever.jpg"> 
</div>

來源

2013-12-08 17:20:45 jaicab

我現在就試試，但也有2幅圖像，必須有透明度0，而其他有1，像下面這樣：沒有選擇器 –

你的意思是，你需要這樣的效果發生只是在圖像中的一個？然後使用一個班級。如果多個圖像必須以相反的方式工作，請使用兩個類並在其中一個類中切換不透明度。 – jaicab

2個鏈接，2個圖像。如果該特定鏈接被點擊，那麼該特定圖像將淡入，另一個鏈出，反之亦然。我現在明白了，坦克 –

圖像過渡盤旋而另一個元素

回答

相關問題