将鼠标悬停在 img 链接上时更改文本

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

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 3

你需要

使用~运算符，如下所示： 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;
}

Answer 4

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>