1 ضمیمه
با ماوس اور روی دیوی که داخلش یک img هست دیو دیگه دقیقاً روی img و هم اندازه با عکس ظاهر بشه
سلام.
من برای کاری که در تیتر گفتم این کدها رو نوشتم
<!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 ظاهر بشه می افته زیر دیو اولی.
من می خوام اون دیو قرمز رنگ بیاد و کامل روی دیو اولی که عکس توشه رو بپوشونه و عکس دیگه دیده نشه.
فایل رو هم ضمیمه کردم.
ممنون میشم راهنمایی کنید.
1 ضمیمه
نقل قول: با ماوس اور روی دیوی که داخلش یک img هست دیو دیگه دقیقاً روی img و هم اندازه با عکس ظاهر بش
کلاس زیر رو ساختم با محتویاتش:
#pd_img img {
position: absolute;
}
بعد position رو اضافه کردم:
#pd_hover {
width: 310px;
height: 200px;
display: none;
position: relative;
}
