css：懸停僞類不工作

我有一個CSS :hover僞類沒有產生任何結果。css：懸停僞類不工作

我正在搞一些圖片庫代碼，我設法得到這個不起作用的代碼片段。我無法弄清楚爲什麼。一些關於大小的怪異CSS規則是因爲這些div通常包含圖像。爲簡單起見，我刪除了圖像，但將規則留在其中。

其他:hover同一頁面上的元素正在工作。

我不知道還有什麼要說的問題，因爲這是如此基礎。我可能錯過了一些非常明顯的東西。這裏

的jsfiddle - http://jsfiddle.net/GbxCM/

來源

2012-09-11 iabw

我猜你正在試圖做一個畫廊，並懸停使用CSS，使包含圖像的div進入全屏。我會使用現有的JavaScript庫來做到這一點... – mb21

我試圖想辦法用CSS來做到這一點。 – iabw

如果您希望有下一個和上一個按鈕，那麼最終您將最終使用JavaScript。而且，如果現有的解決方案已經在所有主流瀏覽器上測試過，爲什麼要重新發明輪子。一個很多人使用的是http://lokeshdhakar.com/projects/lightbox2/ – mb21

在某些情況下（主要是與absolute定位），你不能應用:hover這樣僞類用display: inline-block;進行計算。（如果你有瀏覽器，使用檢查元素，並添加:hover自己特質 - 通知，這將很好地工作，瀏覽器只是不登記:hover本身！）

所以，我繼續和更換這跟float: left; ，添加了餘量（模擬inline-block的樣子），並將br更改爲clear。結果在this jsFiddle。

來源

2012-09-11 00:43:26 Eric

我原先製作了內嵌塊，以便它們自動調整到包含的圖像的大小，但那是我爲其中一種畫廊風格而設計的，其中 - 您是正確的 - 沒有完全定位。我認爲浮球會在這裏發揮作用，我自己也沒有想過它，我感到有點傻。我確認並測試後，我會接受。 – iabw

埃裏克，你碰巧知道這種差異的原因：懸停，絕對和內聯塊？這是一個標準，爲什麼？我找不到關於這個「bug」的任何信息。 – iabw

我也找不到任何官方報告。我假設我只是在尋找錯誤的東西。我認爲，或許「相對」定位可能吸收任何「絕對」定位事件？純粹是一種猜測。 – Eric

如果我猜你正在試圖做正確的東西，那麼你並不需要更改定位或任何。我看到你想要做的唯一變化就是改變背景顏色。 Here's the fiddle I made to clarify that response.

以下是可讀性的緣故代碼：

HTML

<div class="wrapper"> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <br> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
    <div class="squareswrapsolo"></div> 
</div>

CSS

.wrapper { 
    height: 600px; 
    width: 600px; 
    overflow: hidden; 
    position: relative; 
} 

.squareswrapsolo { 
    height: 100px; 
    width: 100px; 
    display: inline-block; 
    overflow: hidden; 
    background: #ccc; 
} 
.squareswrapsolo:hover { 
    background: #000; 
}

來源

2012-09-11 00:38:54 cereallarceny

你的代碼似乎工作;然而，你鏈接的小提琴不起作用。你在他的原始鏈接。 –

哎呀！更正，謝謝喬希。 – cereallarceny

css：懸停僞類不工作

回答

相關問題