我使用悬停效果来更改图像。当我将鼠标悬停在第一张图像上时,它会显示另一张图片,其中包含我想要链接的名称,但是因为我无法在Dreamweaver中看到此图像。
以下是CSS:
div#content .promo{
display:block;
position:relative;
width:170px;
height:170px;
/* border:1px solid #f00;*/
float:left;
margin:10px;
/* border-radius:100px;*/
}
#content .promo .mask {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1.0;
position: absolute;
transition: opacity 0.45s ease-in 0s;
z-index: 1;
background-color:#FFFFFF;
/* border-radius:100px;*/
}
#content .promo:hover .mask {
opacity: 0;
filter:alpha(opacity=0);
}
这是div中图像的代码:
<div id="content">
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<div class="mask">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png"/>
</div>
</div>
</div>
答案 0 :(得分:1)
你去......
<div class="map">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" alt="Pearl" />
<a href="http://www.google.com" class="link link1"></a>
<a href="http://www.yahoo.com" class="link link2"></a>
<a href="http://www.microsoft.com" class="link link3"></a>
</div>
.map {position: relative;}
.link {position: absolute; width: 150px; height: 40px;}
.link.link1 {top: 20px; left: 10px;}
.link.link2 {top: 60px; left: 10px;}
.link.link3 {top: 100px; left: 10px; height: 50px;}
你想要这样的东西吗?
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png" class="hover" />
</div>
.promo img.hover,
.promo:hover img {display: none;}
.promo:hover img.hover {display: inline;}