javascript - 如何在鼠标悬停时将属性应用于之前的同级？

Question

我有两个有序列表，它们都具有相同的链接，但格式不同。一个是缩略图，另一个是实际的文本列表。当用户将鼠标悬停在缩略图上时， anchor 的 CSS 属性会发生变化。我希望当用户将鼠标悬停在文本列表上时发生同样的事情(从而突出显示第一个列表中的适当缩略图)。所以:

当用户将鼠标悬停在第一个 UL 上时，相应的缩略图 anchor 背景变为红色。当用户将鼠标悬停在第二个 UL 上时，第一个列表中相应的缩略图 anchor 再次变为红色。

基本上，当用户将鼠标悬停在文本列表中的客户二上时，客户二的缩略图将变为红色。

我知道这对于 CSS 是不可能的，因为第二个 UL 不是第一个的父级。我如何使用 jQuery 实现这一点？

HTML:

<ul id="client-thumb">
    <li><a href="#client-one">Client one</a></li>
    <li><a href="#client-two">Client two</a></li>
    <li><a href="#client-three">Client three</a></li>    
</ul>

<ul id="client-list">
    <li><a href="#client-one">Client one</a></li>
    <li><a href="#client-two">Client two</a></li>
    <li><a href="#client-three">Client three</a></li>    
</ul>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul#client-thumb li {
     display: block;
    height: 100px;
    width: 100px;
    float: left;
    margin: 0 10px;
    line-height: 100px;
    text-align: center;
}

ul#client-thumb li a {
    display: block;
    height: 100px;
    width: 100px;
    background: #ccc;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    color: black;
}

ul#client-thumb li a:hover {
    background: red;
    color: white;
}

这里的工作代码:http://jsfiddle.net/AKtRe/2/

谢谢。

Answer 1

如果我理解正确的话，我认为您希望在用户将鼠标悬停在相应文本上时将“悬停”属性应用于框。

这不能像上面提到的那样在纯 CSS 和 HTML 中完成，但绝对可以使用 jQuery 使用 mouseover 来完成。或 hover函数并在用户将鼠标悬停在文本上时应用该类。

您可以添加以下 jQuery 代码(来自 @MrCode 's answer below -- 请查看它以获取工作演示)

$('#client-list a').hover(
    function(){
        $('#client-thumb a[href="' + $(this).attr('href') + '"]').css({ background : 'red', color : 'white' });    
    },
    function(){
        $('#client-thumb a[href="' + $(this).attr('href') + '"]').removeAttr('style'); 
    }
);

这允许您在 mouseenter(悬停函数中的第一个处理程序/参数)上添加样式并在 mouseleave(第二个处理程序)上删除它。