오버플로 할 때 스팬 스타일 변경

Question

마우스를 가리키면 스팬의 스타일 (배경색)을 변경하려고합니다. 그게 가능하니?

는 (내 생각)이 같은 것 같다 :

span.wind { 
    padding: 1px; 
    background: red; 
    transition: .5s; 
    -webkit-transition: .5s 
} 

area.wind:hover > span.wind { 
    background: blue; 
    color: #ffffff; 
} 

전체 예를 here

Answer 1

SEE THIS WORKING FIDDLE

당신 개봉 당신의 CSS로는 현재 방법을 시도하고 일을하지 못할,하지만 스킨 요소에 클래스를 추가하고 제거하는 매핑 된 영역에 mouseenter 및 mouseleave 이벤트를 배치하여 스타일을 매우 효율적으로 변경할 수 있습니다. 이렇게하면 스타일 시트에 매번 인라인을 추가하거나 제거하지 않고 미리 정의 된 값을 가질 수 있습니다.

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'); 
    }); 
}); 

NEW CSS는 아주 잘 작동

span.wind_changer { 
    padding: 1px; 
    background: red; 
    transition: .5s; 
    -webkit-transition: .5s; 
} 

.wind_changer.fancy {background:blue;color:#fff;}