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

使用src标记的img属性设置的图片将使用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;}

另外，您需要提及width＆amp; height元素的img。

修改

为了将hover串联应用于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; }

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

Answer 2

你可以这两种方式做到这一点！

我更喜欢使用class=""选择器！

警告：您设置属性src:，但尝试更改background-image:

让我们说

<ul id="recherche">
            <li><a href="#" class="glow"></a></li>
            <li><a href="#" class="glow" style="background-image:none">Glossaire</a></li>
</ul>

您执行内联行为，因为您不希望将b ackground-image应用于第二个锚标记

现在的CSS：

.glow{
background-image:url('/*some url*/');/*the default one*/
}


.glow:hover{
background-image:url('')/*New url inside*/
color:/*some color here, this helps with the text color*/;
}

Answer 3

试试这个：

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

Answer 4

这里是答案

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

Answer 5

#recherche li a:hover{ background:url(../images/glosaire_on.png)}

Answer 6

首先，标记为glosaire_off.png，并且您正尝试使用CSS在悬停时应用背景图像。当然，你想在悬停时将img src更改为g losaire_on.png并更改文本颜色？如果是这种情况，你将不得不使用JavaScript来做到这一点。

修改

假设你有jQuery

<ul id="recherche"> <li><a href="#"><img id="glo" src="images/glosaire_off.png"/>Some text</a></li> <li><a href="#">Glossaire</a></li> </ul> $(document).ready(function () { $("#glo").mouseenter(function(){ $(this).attr("src","images/glosaire_off.png"); $(this).parent().css("color", "green"); }).mouseleave(function(){ $(this).attr("src","images/glosaire_on.png"); $(this).parent().css("color", "red"); }); });

JSFIDDLE

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

6 个答案: