将鼠标悬停在文本上时使用 JavaScript 更改图像，并在将鼠标悬停在图像上时更改文本答案

【问题标题】：Use JavaScript to change image when hovering over text, and change text when hovering over image将鼠标悬停在文本上时使用 JavaScript 更改图像，并在将鼠标悬停在图像上时更改文本
【发布时间】：2014-05-13 14:23:16
【问题描述】：

当您将鼠标悬停在相关的锚标记上时，我有这个 JavaScript 代码可以改变图像的不透明度。我想知道如何让它也反向工作？将鼠标悬停在图像上时更改锚标记。

http://jsfiddle.net/7EzuS/8/

JavaScript

$('.link a').hover(
function () {
    $('img.'+$(this).attr('class')).addClass('hovered');
    },
function () { 
    $('img.'+$(this).attr('class')).removeClass('hovered');
});

HTML

<ul>
    <li><div class="link"><a href="#" class="link_a">Link A</a></div></li>
    <li><div class="link"><a href="#" class="link_b">Link B</a></div></li>
    <li><a href="#"><img class="link_a" src="http://somthing.jpg" /></a></li>
    <li><a href="#"><img class="link_b" src="http://somthing.jpg" /></a></li>
</ul>

CSS

.hovered     {opacity: 1.0;}
img          {opacity: 0.5;}
img:hover    {opacity: 1.0;}

谢谢。

【问题讨论】：

你到底想在这个锚标签中改变什么？
@KeluThatsall 我将更改锚标记文本的颜色。

标签： javascript css

【解决方案1】：

看看我的 example，如果您有任何问题，请告诉我。

$('.link a').hover(
        function () {
            $('img.'+$(this).attr('class')).addClass('hovered');
            },
        function () { 
            $('img.'+$(this).attr('class')).removeClass('hovered');
        });

$('img.link_a').hover(
        function () {
            $('a.link_a').addClass('hovered');
            },
        function () { 
            $('a.link_a').removeClass('hovered');
        });

$('img.link_b').hover(
        function () {
            $('a.link_b').addClass('hovered');
            },
        function () { 
            $('a.link_b').removeClass('hovered');
        });

【讨论】：

【解决方案2】：

在这种情况下，您应该处理 id 而不是类，以便有一个通用的解决方案，看看here

HTML：

<ul>
    <li><div class="link"><a href="#" id="link_a" class="hoverLink">Link A</a></div></li>
    <li><div class="link"><a href="#" id="link_b" class="hoverLink">Link B</a></div></li>
    <li><a href="#"><img id="link_a_img" class="hoverImg" src="http://images.apple.com/support/ipod/images/do_not_disconnect_icon.gif" /></a></li>
    <li><a href="#"><img id="link_b_img" class="hoverImg" src="http://atlanta.braves.mlb.com/images/global/alert_icon.gif" /></a></li>
</ul>

JS：

$('.link a').hover(
function () {
    $('#' + $(this).attr('id') + '_img').addClass('hovered');
},
function () {
    $('#' + $(this).attr('id') + '_img').removeClass('hovered');
});
$('img.hoverImg').hover(
function () {
    var idParts = $(this).attr('id').split('_');
    var id = idParts[0] + "_" + idParts[1];
    $('#' + id).addClass('hovered');
},
function () {
    var idParts = $(this).attr('id').split('_');
    var id = idParts[0] + "_" + idParts[1];
    $('#' + id).removeClass('hovered');
});

CSS：

.hovered     {opacity: 1.0; font-weight:bold;}
img          {opacity: 0.5;}
img:hover    {opacity: 1.0;}

【讨论】：