SEE THIS WORKING FIDDLE
你不能做什么youre与你的CSS尝试它现在是这样的,但你可以在映射区域放置一个mouseenter和mouseleave事件,以便向span元素添加和删除类,从而非常有效地更改其样式。这样,您可以在样式表中预定义值,而不是每次都添加和删除它们。
HTML
<p>Blue <span class="wind_changer">wind</span></p>
<img class="map" width="720" height="305" src="http://www.gloper.org/highplay.pt/images/cultura/logocultura.png" usemap="#usa" />
<map name="usa"><area class="wind" coords="387,9,401,9,414,11,425,17,426,27,418,37,404,42,386,49,353,58,319,66,299,68,273,73,249,76,216,78,183,81,147,84,122,86,103,89,72,92,52,95,24,97,3,97,6,90,57,76,28,84,41,79,73,72,89,72,101,68,108,65,121,62,134,60,150,56,170,51,205,45,224,41,240,36,265,30,280,29,299,23,317,19,342,14,364,11,376,9" shape="poly" title="Blue Wind" /></map>
JS
$.noConflict();
jQuery(function() {
jQuery('.map').maphilight();
jQuery('.wind').mouseenter(function(){
jQuery('.wind_changer').addClass('fancy');
});
jQuery('.wind').mouseleave(function(){
jQuery('.wind_changer').removeClass('fancy');
});
});
新的CSS
span.wind_changer {
padding: 1px;
background: red;
transition: .5s;
-webkit-transition: .5s;
}
.wind_changer.fancy {background:blue;color:#fff;}
它工作得非常好,非常感谢你。 :) – fiskolin