html - 将鼠标悬停在列表元素上时更改 div 中的文本

Question

所以我设置了一个列表，当我将鼠标悬停在不同的元素上时，它会更改元素右侧的图片。我希望文字与图片一起使用，所以我希望在下面的 div 中显示。有没有办法用 css 来实现，所以当我将鼠标悬停在列表中的元素上时，它会更改 div 中的文本？通常我会尝试自己解决这些问题，但我已经搜索了一段时间但似乎找不到解决方案。

HTML:

<div class="relative">
<ul>
    <li>
        <a href="#">Arms</a>
        <img src="img/arms.jpg" alt="">

          <div class="absolute">TEXT TEST 1</div>

    </li>
    <li>
        <a href="#">Back</a>
        <img src="img/back.jpg" alt="">
        <div class="absolute">TEXT TEST 2</div>
    </li>
    <li>
        <a href="#">Head</a>
        <img src="img/head.jpg" alt="">
    </li>
    <li>
        <a href="#">Feet</a>
        <img src="img/feet.jpg" alt="">
    </li>
    <li>
        <a href="#">Legs</a>
        <img src="img/legs.jpg" alt="">
    </li>
    <li>
        <a href="#">Chair</a>
        <img src="img/chair.jpg" alt="">
    </li>
    <li>
        <a href="#">Desk</a>
        <img src="img/desk.jpg" alt="">
    </li>
</ul>
</div>

这里是相关的CSS:

ul {
    background-image: url('../img/bg.jpg');
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position:right top;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    border-right: 1px solid #444;
    display: inline-block;
    height: 700px;
    position: relative;
    width: 800px;
    list-style:none;
    padding-left:0;
}
li {
    font: bold 16px/100px sans-serif;
    height: 100px;
}
a {
    border-right: 1px solid #444;
    border-top: 1px solid #444;
    border-left: 1px solid #444;
    color: black;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 99px;    
}
a:hover {
    background: gray;
    color: #fff;
}
div.relative {
    position: relative;
    width: 700;
    height: 900;
}

div.absolute {
    position: absolute;
    top: 700px;
    width: 800px;
    height: 100px;
    border: 1px solid #444;
}
h3{
    margin-left:200px;
    margin-top:500px;
}
img {
    display: none;
    height: 700;
    position: absolute;
    right: 0;
    top: 0;
    width: 600px;
    background-color:red;
}
a:hover + img,
img:hover {
    display: block;
}

Answer 1

你可以只添加一个样式来显示和隐藏文本 div，就像你已经为 img 所做的那样:

a + img + div
{
  display: none;
}
a:hover + img + div
{
  display: block;
}