0

我使用悬停效果来更改图像。当我将鼠标悬停在第一张图像上时，它会显示另一个图像，其中我想链接的名称很少，但因为该图像在 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>
4

1 回答 1

1

给你...

HTML

<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>

CSS

.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;}

小提琴：http: //jsfiddle.net/praveenscience/6uwRP/

你想要这样的东西吗？

HTML

<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>

CSS

.promo img.hover,
.promo:hover img {display: none;}
.promo:hover img.hover {display: inline;}

小提琴：http: //jsfiddle.net/praveenscience/dYExh/

于 2013-02-14T07:55:26.133 回答