CODEWITHSUNDEEP
htmlcsswordpressimagemap
Giovanni Boerstra
Giovanni Boerstra

Reputation: 49

Image map change image on hover

I have a problem and would love some help! For my website I would like to have an interactive header. I made an image map for a character on the header which when clicked redirects to the about page.

I would like to switch the image when it hovers over the image map. From reading I discovered I could change class b when hovering class a with Sibling markers ~ or + I tried these respectively but they didn't work.

Here is the html concerning the header image and 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>

And the CSS I tried for the imageswap with + as I thought that would do it.

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

You might wanna have a look at the Website if anything is unclear. And Check out the superman character in header.

Upvotes: 1

Views: 1695

Answers (1)

Keish
Keish

Reputation: 91

You're on the right track. The reason your sibling selector "+" isn't working is because you're targeting a div that is not a sibling.

So you're doing this:

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

In order for your CSS to work, you need to change your HTML so that your target hover is on the same line as your target image change (therefore making them siblings). I've tested moving the below using the browser inspector and it doesn't seem to mess up your layout, but its possible you may need to rejig the rest of the header css to accommodate for the change.

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

Upvotes: 1

Related Questions