：将鼠标悬停在一个元素上以更改另一个元素？

我有此条形图，当我悬停特定的条形图时，我想将“ test div”更改为不同的背景色和内容本身。

我在尝试制作一个元素时遇到了麻烦：将鼠标悬停更改为另一个元素。

我知道有关此主题的问题很多，但似乎没有一个对我有用。

HTML：

<div class="the-container">
    <ul>
        <li><a class="html" href="#"></a></li>
        <li><a class="css" href="#"></a></li>
        <li><a class="photoshop" href="#"></a></li>
        <li><a class="illustrator" href="#"></a></li>
        <li><a class="javascript" href="#"></a></li>
    </ul>
    <div class="test"><p>Hello</p></div>
</div>

CSS：

.the-container { width:300px; height:250px; background-color:#EEE; }

.the-container ul { margin:0; padding:0; list-style:none; }

.the-container li { width:40px; height:250px; margin:0 10px; position:relative; float:left;}

.the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; border-top-left-radius: 5px; border-top-right-radius: 5px;}

.the-container li a.html:hover { background-color:#111; }
.the-container li a.css:hover { background-color:#ef3ef3; }
.the-container li a.photoshop:hover { background-color:#be3be3; }
.the-container li a.illustrator:hover { background-color:#cd3cd3; }
.the-container li a.javascript:hover { background-color:#888; }

div.test{width:300px; height: 30px; background-color:#BBB; position: relative; clear:both; line-height:2; margin-top:-16px;}

div.test p {text-align: center;}

a.html:hover ~ div.test{background-color:yellow;}

演示版

有任何想法吗？非常感激！