html - 使悬停在一个元素上影响另一个元素的最佳方法？

Answer 1

几种方法：

1. 如果您可以控制 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。

2. 如果您的文字a总是紧跟在您的图片之后a，并且您需要在悬停时进行的唯一更改是对以下内容的更改text：

   <a class="image_is_displayed_using_this"></a>
   <a class="text_with_it">Text here</a>
   

   然后对于 CSS：

   .text_with_it:hover,
   .image_is_displayed_using_this:hover + .text_with_it { color: red; }
   

   这将使每当您将鼠标悬停在图像或文本上时，文本的颜色都会改变。但请注意，它有点脆弱 - 因为它依赖于您的 HTML 以特定方式布局。

3. 使用IMG标签——这就是它们存在的目的。

   <a class="text_with_it">
     <img src="your_image_url.png" /> Text here
   </a>
   

   然后对于 CSS：

   a.text_with_it:hover { color: red; }
   

4. 最后——如果你需要用 jQuery 来做，试试这个：

   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');
   });
   

   然后对于 CSS：

   a.hovered { color: red; }
   

   这是一个 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");
    });
});