2

私はこれをしたい：

ここに画像の説明を入力

アイテムの div があります: タイトル、画像、テキスト。その div にマウスを置くと、画像 2 のように、この div が灰色になる必要があります。次のようなコードがあります。

CSS 

.container div {
    display: none;
    width: 250px;
    height: 250px;
}

.container:hover div {
    display: block;
}

.graydiv {
    background-image:url(over.png); // transparent gray png
    position: absolute;
    margin-top: -250px; 
}

HTML:

<div class="container">
<img src="someimg.jpg" alt="" />
<p>some text</p>
<p>some text</p>
<div class="graydiv"></div></div>

でもIE8だと灰色のdivが表示されない…ChromeやFirefoxなどならOK！

また、Div全体をリンクにする必要があります...

それで、何をすべきか、何を使用するかについてのアイデアはありますか？

4

1 に答える 1

2

これを試して。http://jsfiddle.net/QZbRw/

HTML

<a href="#">
    <div class="container">
        <img src="someimg.jpg" alt="" />
        <p>some text</p>
        <p>some text</p>
    </div>
    <span class="hover"></span>
</a>​

CSS

.container {
 width: 250px;
 height: 250px;
 background:#FFF;
}

a:hover .hover{
 width: 250px;
 height: 250px;
 background:#000;
 opacity:0.5;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 z-index:100;
 float:left;
 position:relative;
 top:-250px;
}

</p>

于 2012-06-28T19:35:33.483 に答える