호버상의 이미지지도 변경 이미지

Question

나는 문제가있어서 도움이 될 것입니다! 내 웹 사이트의 경우 대화 형 헤더가 필요합니다. 헤더의 문자에 대한 이미지 맵을 만들었습니다. 클릭하면 약 페이지로 리디렉션됩니다.

이미지 맵을 가리킬 때 이미지를 전환하고 싶습니다. 읽을 때부터 클래스 A를 가리키면 클래스 B를 바꿀 수 있다는 것을 알았습니다 형제 마커 ~ 또는 + 각각 시도했지만 작동하지 않았습니다.

다음은 헤더 이미지 및 이미지 맵과 관련된 html입니다.

<div class="td-main-content-wrap td-main-page-wrap"> 
      <div class="td-container"> 
       <div class="vc_row wpb_row td-pb-row"><div class="wpb_column vc_column_container td-pb-span12"><div class="wpb_wrapper"> 
<div class="wpb_raw_code wpb_content_element wpb_raw_html"> 
    <div class="wpb_wrapper"> 
     <a href="http://breakline.nl/about/meet-giovanni-boerstra/" class="giomap" title="Meet Gio!" style="position: absolute; left: 70.63%; top: 20.32%; width: 13.85%; height: 39.57%; z-index: 2;"></a><a href="http://breakline.nl/about/meet-stef-verkooijen/" class="stefmap" title="Meet Stef!" style="position: absolute; left: 17.6%; top: 44.28%; width: 14.38%; height: 50.74%; z-index: 2;"></a> 
    </div> 
</div> 

<div class="wpb_single_image wpb_content_element vc_align_center superheroheader"> 

    <figure class="wpb_wrapper vc_figure"> 
     <div class="vc_single_image-wrapper vc_box_border_grey"><img width="1920" height="743" src="http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2.jpg" class="vc_single_image-img attachment-full" alt="Testheadersuperhero2" srcset="http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2.jpg 1920w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-300x116.jpg 300w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-768x297.jpg 768w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1024x396.jpg 1024w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-696x269.jpg 696w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1068x413.jpg 1068w, http://breakline.nl/wp-content/uploads/2016/07/Testheadersuperhero2-1085x420.jpg 1085w" sizes="(max-width: 1920px) 100vw, 1920px"></div> 
    </figure> 
</div> 

그리고 그 그것을 할 것이라고 생각 나는이 +로 imageswap에 대한 시도 CSS. 아무것도 불분명 한 경우

.stefmap:hover + .superheroheader img{ 
visibility:hidden;} 
    .stefmap:hover + .superheroheader { 
background-image:url(wp-content/uploads/2016/08/Testheadersuperhero2hover.jpg); 
background-size:cover;} 

당신은하고 싶지는 Website 살펴있을 수 있습니다. 헤더의 수퍼맨 캐릭터를 확인하십시오.

Answer 1

당신은 올바른 길을 가고 있습니다. 형제 선택자가 "+"작동하지 않는 이유는 형제가 아닌 div를 타겟팅하기 때문입니다.

그래서 당신은이 일을하고 있습니다 : 당신의 CSS는, 당신이 당신의 목표 호버는 대상 이미지 변화와 같은 줄에 있도록 HTML을 변경할 필요가 작동하려면에서

<div class="wpb_raw_code wpb_content_element wpb_raw_html"> 
    <div class="wpb_wrapper"> 
     <a class="giomap""></a> 
     <!-- target hover--> 
     <a class="stefmap""></a> 
    </div> 
</div> 

<!-- target image change--> 
<div class="wpb_single_image wpb_content_element vc_align_center superheroheader"> 
</div> 

은 (그러므로 만드는

형제 자매). 나는 브라우저 검사기를 사용하여 아래를 움직이는 것을 테스트했으며 레이아웃을 엉망으로 만들지는 않았지만 가능한 경우 변경 사항을 수용하기 위해 헤더 CSS의 나머지 부분을 다시 잡아야 할 수도 있습니다.

<div class="wpb_raw_code wpb_content_element wpb_raw_html"> 
    <div class="wpb_wrapper"> 
     <a class="giomap""></a> 
    </div> 
</div> 

<!-- target hover--> 
<a class="stefmap""></a> 

<!-- target image change--> 
<div class="wpb_single_image wpb_content_element vc_align_center superheroheader"> 
</div>