Bild Karte Bild auf Schwebeflug ändern

Question

Ich habe ein Problem und würde gerne etwas Hilfe! Für meine Website möchte ich einen interaktiven Header haben. Ich habe eine Image-Map für ein Zeichen in der Kopfzeile erstellt, die beim Klicken auf die About-Seite umgeleitet wird.

Ich möchte das Bild wechseln, wenn es über die Imagemap schwebt. Vom Lesen entdeckte ich, dass ich Klasse b ändern konnte, wenn Klasse A mit Geschwistermarker ~ oder + schwebte Ich probierte diese, aber sie haben nicht funktioniert.

Hier ist der HTML-Code für das Header-Image und Image-Map.

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

Und die CSS ich für den imageswap mit + versucht, wie ich dachte, dass es tun würde.

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

Vielleicht möchten Sie einen Blick auf die Website, wenn etwas unklar ist. Und überprüfen Sie den Superman-Charakter in der Kopfzeile.

Answer 1

Sie sind auf dem richtigen Weg. Der Grund dafür, dass Ihr Geschwisterselektor "+" nicht funktioniert, liegt darin, dass Sie auf ein div verweisen, das kein Geschwister ist.

So tun Sie dies:

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

Damit Ihr CSS zu arbeiten, müssen Sie Ihre HTML ändern, so dass Ihre Ziel schweben auf der gleichen Linie wie Ihr Zielbild ändern ist (daher macht sie Geschwister). Ich habe getestet, Verschieben der unten mit dem Browser-Inspektor und es scheint nicht zu versauen Ihr Layout, aber es ist möglich, dass Sie möglicherweise den Rest des Headers CSS umjustieren für die Änderung anzupassen.