Question

代码：

我的代码：

<a class="image_is_displayed_using_this"></a> - This is the image
<a class="text_with_it">Text here</a> - This is the text that should change color 
if above image is hovered.

如果两个结构中的任何一个悬停在上面，我希望它们具有相同的颜色。对于图像，图像在悬停时会发生变化，并且图像的颜色为红色。我需要文本也是红色的。

问题：

如果图像悬停，如何更改文本的颜色？

编辑：

无法编辑html文档。

Answer 1

几种方法：

IF 您可以控制HTML，并且可以添加包装元素，您可以将它们放在一个包含元素中，并使用CSS。
```
<div class="hoverable">
  <a class="image_is_displayed_using_this"></a>
  <a class="text_with_it">Text here</a>
</div>
```
然后是CSS：
```
.hoverable:hover > .text_with_it { color: red; }
/* Or replace *red* with whatever color you want */
```
这可以通过使文本根据正在悬停的父项更改颜色来实现 - 当鼠标悬停在图像a或文本a上时，这将是正确的。
如果，您的文字a将始终在您的图片a之后立即显示，而您在悬停时需要进行的唯一更改是对{的更改{1}}：
```
text
```
然后是CSS：
```
<a class="image_is_displayed_using_this"></a>
<a class="text_with_it">Text here</a>
```
这样可以使鼠标悬停在图像或文本上时，文本的颜色会发生变化。请注意，它有点脆弱 - 因为它依赖于HTML以特定方式布局。
使用.text_with_it:hover, .image_is_displayed_using_this:hover + .text_with_it { color: red; }标记 - 这就是它们的存在。
```
IMG
```
然后是CSS：
```
<a class="text_with_it">
  <img src="your_image_url.png" /> Text here
</a>
```

最后 - 如果您需要使用jQuery，请尝试以下方法：

a.text_with_it:hover { color: red; }

然后是CSS：

var selector = '.image_is_displayed_using_this, .text_with_it';
$(selector).hover(function (ev) {
    $(this).siblings(selector).add(this).addClass('hovered');
}).mouseout(function (ev) {
    $(this).siblings(selector).add(this).removeClass('hovered');
});

Here's a jsFiddle显示它有效（非常简单）。

Answer 2

我会将它们包装在像<div class="hoverable"><a><img/></a><a>text</a></div>之类的元素中，然后设置css .hoverable:hover { color: yellow; }

Answer 3

使用CSS？在悬停时将文本更改为红色

a :hover { color: # }

当您将鼠标悬停在图像上时也应该有效，因为它们都是“a”元素

Answer 4

完全基于您的描述，在jquery中最简单：

$('a.image_is_displayed_using_this').hover( function() {
    $('a.text_with_it').css('background-color','gray');
}, function() {
    $('a.text_with_it').css('background-color','white');
});

Answer 5

如果你可以使用jQuery，你可以做这样的事情

$(document).ready(function(){
    $("a.image_is_displayed_using_this").mouseout(function(){
        $("a.text_with_it").css("color", "black");
    }).mouseover(function(){
        $("a.text_with_it").css("color", "red");
    });
});

将鼠标悬停在<a> element affect another?</a>上的最佳方法

代码：

问题：

编辑：

5 个答案: