图像地图在悬停时更改图像

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>

以及我尝试使用 + 进行图像交换的 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 不是兄弟。

所以你正在这样做：

<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，以便您的目标悬停在您的目标图像更改的同一行上（因此使它们成为兄弟）。我已经使用浏览器检查器测试了移动下面的内容，它似乎不会弄乱您的布局，但您可能需要重新调整标题 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>