html - 悬停时图像 map 品牌 Logo 更改

Question

我找到了很多解决这个主题的帖子，但是我的代码仍然遇到问题:

    <div id="product_tabs_description_tabbed_contents" style="display: block;"><img style="margin-left: -10px; opacity: 1 !important;" src="{{media url="brands.png"}}" alt="" width="754" usemap="#brands_map" /></div>
<a href="javascript:void(0)"><map class="maptest" name="brands_map"> 
<area title="Nike" shape="rect" coords="4,3,73,41" href="#" alt="Nike" class="0" />

<area title="Lonsdale" shape="rect" coords="99,7,168,45" href="#" alt="Lonsdale" class="1" />

<area title="No Fear" shape="rect" coords="206,5,284,42" href="#" alt="No Fear" class="2" />

<area title="Karrimor" shape="rect" coords="317,9,376,62" href="#" alt="Karrimor" class="3" />
 </map> </a>

我有 first.png 是黑白的，second.png 是彩色的。我需要在悬停时为当前品牌着色。可以找到示例:http://www.bestsports.sk/

我正在使用图像映射，但我不知道如何配置 css 以使其工作。我也无法访问我的外部 css 文件，所以我必须将 css 代码直接放在 html 中。

Answer 1

您可以应用以下内容(我也包含了一个漂亮的 CSS 淡入过渡)

HTML:

<div class="logo">
 <!-- black and white logo --> 
     <img src="batman-logo-bw.png" />
     <div class="logocolor">
        <!-- color logo --> 
        <img src="batman-logo-color.png" />
     </div>
  </div>

CSS:

div.logo {
  float:left;
  margin:20px;
  position:relative;
}

div.logo div.logocolor {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover div.logocolor {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

看我的 fiddle :

http://jsfiddle.net/XhDBw/1/

您也可以删除第二个嵌套的 div，只使用 img。在这种情况下，应用以下 CSS 将第二个图像作为最后一个子图像处理:

div.logo img:last-child {
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  -moz-opacity:0;
  -webkit-opacity:0;
  -moz-transition:0.2s;
  -webkit-transition:0.2s;
  -o-transition:0.2s;
}

div.logo:hover img:last-child {
  opacity:1;
  -moz-opacity:1;
  -webkit-opacity:1;
}

干杯，

杰伦