11

:hover結果を生成しないCSS疑似クラスがあります。

画像ギャラリーのコードをいじっていたのですが、うまくいかないこのスニペットをなんとか手に入れました。理由がわかりません。ここでのサイズに関する奇妙な CSS ルールのいくつかは、これらの div には通常画像が含まれているためです。簡単にするために画像を削除しましたが、ルールは残しました。

:hover同じページの他の要素は機能しています。

これは非常に基本的な問題であるため、この問題について他に何を言うべきかわかりません。私はおそらく本当に明白な何かを見逃しています。

JSFiddleはこちら - http://jsfiddle.net/GbxCM/

4

3 に答える 3

15

場合によっては (主にポジショニングで)、疑似クラスを何かにabsolute適用することはできません。(Chrome を使用している場合は、inspect 要素を使用して自分でトレイトを追加してください。注意してください。完全に機能します! ブラウザはそれ自体を登録しません。):hoverdisplay: inline-block;:hover:hover

そこで、これを に置き換え、 (外観float: left;をシミュレートするために) マージンを追加し、 を に変更しました。結果はこの jsFiddleにあります。inline-blockbrclear

于 2012-09-11T00:43:26.500 に答える
3

あなたがやろうとしていることを私が正しく推測しているなら、ポジショニングなどを変更する必要はありません。あなたがやりたいと思う唯一の変更は、背景色の変更です。 これが、その応答を明確にするために作成したフィドルです。

読みやすさのためのコードは次のとおりです。

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-11T00:38:54.180 に答える