悬停时图像映射更改图像

Question

我有问题，希望得到帮助！对于我的网站，我希望有一个交互式 header。我为 header 上的一个角色制作了图像映射，点击后会重定向到关于页面。

我想在鼠标悬停在图像地图上时切换图像。通过阅读我发现我可以在悬停 class a 时更改 class b 兄弟标记 ~ 或 + 我分别尝试了这些但它们没有用。

这里是 html 关于 header 图像和图像映射。

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

还有 CSS 我尝试使用 + 进行图像交换，因为我认为可以做到这一点。

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

如果有任何不清楚的地方，您可能想看看 Website。并查看 header.

中的超人角色

Answer 1

你走在正确的轨道上。您的同级选择器“+”不起作用的原因是您定位的 div 不是同级。

所以你这样做：

<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 正常工作，您需要更改 HTML 以便您的目标悬停与目标图像更改在同一行（因此使它们成为兄弟姐妹）。我已经测试过使用浏览器检查器移动下面的内容，它似乎并没有弄乱你的布局，但你可能需要重新调整 header 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>

悬停时图像映射更改图像

Image map change image on hover

html

css

wordpress

imagemap