3

これは私の最初の投稿です。私はまだ CSS を学んでおり、あなたの助けは大歓迎です。

下部に半透明の境界線がある透明なオーバーレイを持つ画像を含む Div を作成しようとしています。ホバーすると、2 つ目の透明なオーバーレイが追加され、下の境界線が暗くなります。次に、いくつかのタイトル テキストを含む別の div を作成します。タイトル テキストは、親 Div の任意の場所にカーソルを合わせると色が変わり、クリックすると全体がリンクされます。

それに最も近いものは、Vimeo にあります。

http://vimeo.com/categories

私はこれをすべて達成することができ、IE、Firefox、サファリなどで正常に動作しています。

これが私のCSSです：

.videoCatThumbImg {
    position:relative;
    background:#FFFFFF;
    width: 178px;
    height: 178px;
    padding: 5px 5px 5px 5px;
    margin: 10px 0px 0px 0px;
    border: 1px solid #CCCCCC;
    line-height:normal;
    float:left;
}   

.videoCatTskin {
    position: absolute; top: 5px; left: 5px;
}

.videoCatThumbHover {
    position: absolute; top: 5px; left: 5px; display: none;
}

.videoCatThumbImg:hover .videoCatThumbHover{
    display: block;
}

.videoCatTitle {
    position:absolute;
    top:5px; left:5px;
    display:block;
    width:173px;
    height:26px;
    padding:152px 0px 0px 5px;
    Font-size:18px;
    font-weight:bold;
    color: #ffffff;
}

.videoCatTitle:hover {
    color: #5798ca;
}

ここに私のHTMLがあります：

<div class="videoCatThumbImg">
    <img src="http://www.mydomain.com/images/vcat/image_thumb.gif" alt=""/>
    <img class="videoCatTskin" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <img class="videoCatThumbHover" src="http://www.mydomain.com/images/vcat/thumb_hover.png" alt=""/>
    <a href="http://www.mydomain.com/category/356"><div class="videoCatTitle">Some Text Here</div></a>
</div>

私が間違っていることについてのアドバイスは大歓迎です。

4

2 に答える 2

0

この回答と同様に、背景（透明な画像または同じ色で機能します）を、背景がないホバークラスに追加してみてください（.videoCatThumbImg:hover）。

于 2013-01-03T18:07:35.760 に答える
0

ただ問題がありました。どのソリューションも機能していませんでした (border、background、hasLayout)。

最後に、XHTML 1 Strict doctype に切り替えたところ、うまくいきました。

于 2013-04-17T12:28:22.547 に答える