html - 当我悬停其中任何一个时更改图像和文本颜色

Question

我旁边有一个图像和一个文本(放在一个列表中，每个都在一个 li 中)，我想做的是当我悬停其中任何一个时，图像变为另一个，并且文本改变颜色。

这是我的代码:

<ul id="recherche">
    <li><a href="#"><img id="glo" src="images/glosaire_off.png" alt=""/></a></li>
    <li><a href="#">Glossaire</a></li>
</ul>

这是我想为图像更改做的悬停:

#glo:hover{
    background-image:url(../images/glosaire_on.png) ;
}

那么有没有人知道如何在我们悬停其中任何一个时立即对这两个事物应用悬停效果？谢谢!

Answer 1

使用 img 标签的 src 属性的图像集将与使用 background-image 样式的图像集重叠。你需要做的是: Demo

HTML:

<ul id="recherche">
            <li><a href="#"><img id="glo" src="#" alt=""/></a></li>
            <li><a href="#">Glossaire</a></li>
</ul>

CSS:

ul:hover #glo{
    background-image:url(../images/glosaire_on.jpg) ;
}
ul:hover a{ color: teal;}

ul #glo{
    width: 300px;
    height: 200px;
    background-image:url(../images/glosaire_off.jpg) ;
}
ul a{ color: green;}

此外，您还需要提及 img 元素的 width 和 height。

---

编辑:

为了将悬停应用到串联的 2 个 li 元素集，您需要将它们封装在各自的 ul 元素中，如下所示:

<ul id="recherche">
    <li id="glo"><a href="#"></br></a></li>
    <li><a href="#">Glossaire</a></li>
</ul>
<ul>
    <li id="rech"><a href="#"></br></a></li>
    <li><a href="#">Recherche</a></li>
</ul>

Updated fiddle

另外，检查确保目标元素正确所需的 CSS 更改。 CSS:

ul {
    width: 300px;
}
ul:hover li:first-child {
    background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-2.jpg);
}
ul:hover li:first-child + li a {
    color: teal;
}
ul li:first-child {
    width: 300px;
    height: 200px;
    background-image:url(http://mailboxtolucalake.com/wp-content/themes/thesis/rotator/sample-1.jpg);
}
ul li:first-child + li a {
    color: green;
}

我使用 CSS (+) 的 first-child 选择器和兄弟选择器来定位适当的元素。