最好的方法來改變懸停的div寬度

這個投資組合網站的創建者是如何做出酷炫的圖像效果的？ http://www.adhamdannaway.com/最好的方法來改變懸停的div寬度

我目前正在訓練自己學習更先進的東西，但即時通訊有這種影響的麻煩。

我這樣做的方式是使容器的寬度爲1280px（1280px是img的寬度）。用彩色和其他黑色和白色製作2個圖像。 2格寬度爲50％的寬度並向左浮動，浮動戰鬥。正確的一個沒有顯示正確，所以我用這個：background-position：右上角，它工作。即使在更大的屏幕尺寸下，它們也是完美的。但問題在於此。我怎麼能讓它，所以當我徘徊左div的div獲取寬度100％。和其他div一樣。

我知道我可以用#div：hover，然後寬度爲100％，固定圖像在z-index上方得到，但只有當im懸停時纔會發生，但不會在iive被解除時發生。顯然，因爲它：懸停。但我目前還不知道如何以更好的方式做到這一點。

我把代碼放在jsfiddle.net/aLyde6pa/上，但它不起作用。

我很可能解釋過比我應該多，但我希望你們能幫助我。

在此先感謝！

ps：英語不是我的主要語言。 :)

來源

2015-09-10 Kappa

我建議你改一下你的問題，因爲你所要求的意見和堆棧溢出不是那個地方。請詳細閱讀[我應該避免詢問什麼類型的問題？]（https://stackoverflow.com/help/dont-ask） –

是的，用CSS你可以用「過渡」類似的東西，但不像示例中那樣動畫化，因爲您在CSS上限制了懸停時要更改的內容。正如我知道你不能，你將鼠標懸停在元素之前更改元素（糾正我，如果我錯了）

下面是一個簡單的例子（https://jsfiddle.net/9510a6kj/）：

HTML

<div class="left"></div> 
<div class="right"></div>

CSS

.left, .right{ 
    float:left; 
} 

.left{ 
    background: red; 
    width: 200px; 
    height: 300px; 
    transition: width 1s ; 
} 

.right{ 
    background: blue; 
    width: 300px; 
    height: 300px; 
    transition: width 1s; 
} 

.left:hover{ 
    width: 300px; 
} 

.left:hover + .right{ 
    width: 100px; 
}

也許這有助於

片切換將「動畫」（更多的延遲）從寬度A變化到B

乾杯

來源

2015-09-10 18:44:54 the0MIKE

你先生是我的英雄。謝謝你，這真的很有幫助。不得不改變這一點壽：D – Kappa

很高興我可以幫助:) – the0MIKE

那麼它總是很好學習更多的技能，但你可以添加一個懸停效果，甚至沒有使用JS，通過使用CSS懸停效果。

一般看起來像：中做它的懶惰或哈克的方式

#img1 { 
    width: 50px; 
    height: 50px;  
    } 

    #img1:hover { 
    width: 75px;  
    height: 75px;  
    }

類，但它工作得很好，它有很多的學習發展的一個非常早期的階段更容易。你也可以使用一個jQuery撐着，像這樣的（只是改變文本出來的圖像，然後編輯屬性）

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover http://www.geekality.net/2010/08/26/jquery-nice-and-smooth-hover-effect/

來源

2015-09-10 18:32:29 Jackg093

只是爲了澄清：您建議他使用常規的'.hover'事件功能jQuery，它不是庫的外部插件。 –

我想說，內置jQuery懸停效果設計明智看起來像CSS一樣：懸停。但是如果你想讓它更有趣，那麼很多非常酷的不同庫和jQuery插件將會更加吸引人。像這樣：http://www.geekality.net/2010/08/26/jquery-nice-and-smooth-hover-effect/ PS。對不起所有的編輯，習慣張貼在計算器上，並且我一直擊中返回 – Jackg093

最好的方法來改變懸停的div寬度

回答

相關問題