イメージマップがホバリングで変更された画像

Question

私は問題があり、助けが大好きです！ 私のウェブサイトにはインタラクティブヘッダーがあります。 ヘッダー上の文字のイメージマップを作成しました。これをクリックすると、aboutページにリダイレクトされます。

イメージマップ上を移動するとイメージが切り替わります。 私が発見したのは、クラス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が動作するためには

<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> 

をターゲットホバーは、ターゲット画像の変更と同じ行にあるように、あなたは（あなたのHTMLを変更する必要があるので、作りますそれらの兄弟）。私はブラウザのインス​​ペクタを使って下を移動することをテストしましたが、あなたのレイアウトを台無しにしていないようですが、変更のために残りのヘッダ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>