CSS：ホバー疑似クラスが動作しない

Question

CSS :hover疑似クラスがあり、結果が得られません。

私はイメージギャラリーコードを使いこなしていましたが、私はこのスニペットがうまくいかない場合がありました。なぜ私は理解できません。これらのdivには通常イメージが含まれているため、ここでサイズに関するCSSルールが奇妙なものがあります。簡単にするためにイメージを削除しましたが、ルールは残りました。

他の:hoverの要素が同じページにあります。

これは非常に基本的なので、私は問題について何か言いたいことはわかりません。私はおそらく本当に明白な何かを失っているでしょうここ

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

Answer 1

いくつかの例（主にabsoluteポジショニングと）では、あなたは適用することはできません:hover疑似クラスメーピングはdisplay: inline-block;である。 （あなたは、Chromeを持っている要素を検査し、:hoverを自分でトレイトを追加使用する場合 - ！。予告、それは完璧に動作するブラウザがちょうど:hover自身を登録しません）

だから、私は先に行って、float: left;でこれを置き換えます（inline-blockの外観をシミュレートするため）余白を追加し、brをclearに変更しました。結果はthis jsFiddleです。

Answer 2

私はあなたが何をしようとして正しく推測している場合、あなたはポジショニングまたはそのいずれかを変更する必要はありません。私が望むように見える唯一の変化は、背景の色を変えることです。ここで

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; 
}​