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 に答える