Question

如何更改未包装img链接的“a”的文本颜色

<li>
    <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR">
        <img alt="Franchise 16" src="#"></img>
    </a>
    <a href="# CHANGE THIS TEXT COLOR WHEN IMG ABOVE IS HOVERED">TEXT</a>
</li>

我已尝试使用css而无法找到解决方案，我是否需要使用javascript？

Answer 1

您可以使用直接同级选择器

li a:first-child:hover + a {
    color: ....
}

Answer 2

css应该是这样的

.testimg:hover .testtext
{
color:red;
}

和html应该是这样的

<li>
    <a class="testimg" href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR">
        <img  alt="Franchise 16" src="#"></img>
    </a>
    <a class="testtext" href="# CHANGE THIS TEXT COLOR WHEN IMG ABOVE IS HOVERED">TEXT</a>
</li>

Answer 3

<强> jQuery的：

$(function(){
      $('#first-link').hover(function(){
        $('#second-link').css('color','red');
      });
});

<强> HTML：

<li>
    <a id="first-link" href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR">
        <img alt="Franchise 16" src="#"></img>
    </a>
    <a id ="second-link" href="# CHANGE THIS TEXT COLOR WHEN IMG ABOVE IS HOVERED"></a>
</li>

Answer 4

您需要使用~运算符，如下所示：http://jsfiddle.net/maximgladkov/QAYLU/

HTML

<a href="#one" id="one">
    <img alt="Franchise 16" src="" width="100" height="100" />
</a>

<a href="#two" id="two">Two</a>

CSS

#one:hover ~ #two {
    color: red;
}

图像链接悬停时更改文本

4 个答案:

HTML

CSS