با ماوس اور روی دیوی که داخلش یک img هست دیو دیگه دقیقاً روی img و هم اندازه با عکس ظاهر بشه [بایگانی]

bftarane

شنبه 27 مهر 1392, 09:22 صبح

سلام.
من برای کاری که در تیتر گفتم این کدها رو نوشتم

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>

#pd_box
{
width:310px; height:330px; float:right; margin:10px;
border:solid 1px #999;
background:#fff;
border-radius:12px;
}
#pd_img
{
width:310px;
height:200px;

z-index:1000;

}
#pd_boxbottom
{width:310px;
height:130px;

}

#pd_hover
{
width:310px;
height:200px;

display:none;

}
#pd_img:hover #pd_hover
{
background:red;
display:block;

}
</style>
</head>
<body>

<div id="pd_box">
<div id="pd_img">
<img src="Tulips.gif" width="310px" height="200px"/>

<div id="pd_hover"></div>

</div>

<div id="pd_boxbottom"></div>
</div>
</body>
</html>
ولی دیوی که قراره موقع hover ظاهر بشه می افته زیر دیو اولی.
من می خوام اون دیو قرمز رنگ بیاد و کامل روی دیو اولی که عکس توشه رو بپوشونه و عکس دیگه دیده نشه.
فایل رو هم ضمیمه کردم.

ممنون میشم راهنمایی کنید.

Omid Jackson

شنبه 27 مهر 1392, 09:59 صبح

کلاس زیر رو ساختم با محتویاتش:

#pd_img img {
position: absolute;
}
بعد position رو اضافه کردم:

#pd_hover {
width: 310px;
height: 200px;
display: none;
position: relative;
}