移動圖像懸停與css

是否有這種懸停效果http://apotheke-hh.de/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=2 與CSS，在所有主流瀏覽器工作？移動圖像懸停與css

對於閱讀此內容的其他人以及鏈接已損壞 - 請參閱附加圖像。

Registers Torsten！ hover image two

hover image one

來源

2014-01-20 toddiHH

查看問題要求代碼必須證明對所解決問題的最小理解。包括嘗試解決方案，爲什麼他們沒有工作，以及預期的結果。另請參閱：堆棧溢出問題清單。 –

嗨保利 - 我瞭解CSS，但不是JS。這裏的結果是一個非常有用的答案，它使用較少的代碼，並且是一個可以幫助其他人的當代解決方案。 – toddiHH

我想你可以爲所有主要的瀏覽器，但它取決於課程的版本，這裏有一個例子：

HTML

<div class="all"> 
    <div class="col one"></div> 
    <div class="col two"></div> 
    <div class="col three"></div> 
</div>

CSS

.col { 
    float:left; 
    width: 33.3333%; 
    height: 150px; 
    transition:width 300ms ; 
} 

.all:hover .col{ 
    width:25%; 
} 
.all:hover .col:hover { 
    width: 50%; 
}

和活在JSFiddle上：http://jsfiddle.net/pavloschris/mrXPu/

唯一的'怪異'規則是transition其中有一個非常好的支持，如在Can I Use

來源

2014-01-20 12:28:56 xpy

非常感謝Pavlos - 這正是我要找的:) – toddiHH

最可能的是，你需要JS來達到這種效果！所有主流瀏覽器都無法使用CSS解決方案。

來源

2014-01-20 11:58:30 Minister

移動圖像懸停與css

回答

相關問題