Html 图像上的css目标文本

我已经很接近了，但我尝试过的三种不同的方法都在挑战我

我想做的是在左边有一个列表，将鼠标悬停在左边的6个元素中的任意一个上，让右边的图像随着文本的变化而变化。第一个图像应该是默认显示的图像

您将看到，我已经尝试了3种不同的方法来让文本显示在前3个元素上。不管我怎么做，文本总是显示在所有3个元素上，而不仅仅是悬停的元素

以下是现场测试现场：

这是一个使用Headway主题（GUI主题创建者）的WordPress站点

这是本节的JSFIDLE部分，其中的问题是：（它看起来很混乱，因为它不是完整的站点，而只是容器中的自定义代码

<div class="switch prehover texthover">
<ul>
    <li>
        <a href="#" class="hvr-bubble-right">One Stop</a>
        <img src="" alt="" />
        <h2><span>All required services in one location</span></h2>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Private</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/private.png" style="width:67%;" alt=""/>
        <h2><span>Personal information and requirements are kept completely confidential.</span></h2>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Personal</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Personal.png" style="width:67%;" alt=""><p class="personal"></p></img>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Cross border</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Crossborder.png" style="width:67%;" alt=""/>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Execution</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/execution.png" style="width:67%;" alt=""/>
    </li>
    <li>
        <a href="#" class="hvr-bubble-right">Services</a>
        <img src="http://oppcess.test-lca-website.com/wp-content/uploads/2015/02/Service.png" style="width:67%;" alt=""/>
    </li>
</ul>

在下面的代码中添加z-index:1；，以在顶部显示图像

.switch a:hover + img, .switch img:hover {
    display: block;
    z-index: 1;
} 

您仅为图像同级而不是文本执行切换（显示/隐藏）

.switch a:hover + img, .switch img:hover {
    display: block;
}

在这种情况下，您可以使用say class

.details

将所有文本包装在一个容器中，并使用

通用同级组合器~

选择锚定后的元素。首先将.details隐藏，然后切换到悬停状态

.details {
    display: none;
}
.switch a:hover ~ div.details {
    display: block;
}

---

精彩的捕捉！我知道这是我以前没有学过的东西！谢谢！关于如何使文本位置相对于图像而不是链接位于左侧，有什么建议吗？或者，您可以像对图像所做的那样定位文本容器（绝对位置，右侧：0）或者，您可以使用容器包装图像和文本，并对容器进行定位，这样就不需要单独定位内容。因此，在LI标记之后？或之前？放置一个DIV标记。我已使用类

contentWrap

的DIV包装img和文本并对其进行定位。奇怪的是，当我尝试时，该代码刚刚破坏了所有内容。I get第一张图片上没有文本，其余图片不在正确的位置。：/我已经用我最新的修改更新了Fiddle：（更奇怪的是，Fiddle在第一个选项上没有显示悬停文本，但在实时站点上显示…）更新的Fiddle:

.details {
    display: none;
}
.switch a:hover ~ div.details {
    display: block;
}