如何在悬停时将属性应用于上一个兄弟？

Question

我有两个有序列表，两个都有相同的链接，但格式不同。一个是缩略图，另一个是实际文本列表。当用户将鼠标悬停在缩略图上时，锚点的CSS属性会发生变化。当用户将鼠标悬停在文本列表上时（因此突出显示第一个列表中的相应缩略图），我会发生同样的事情。所以：

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

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

我知道这是不可能的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上添加样式（hover函数中的第一个处理程序/参数）并在mouseleave（第二个处理程序）上删除它。

Answer 2

你不能用css做，因为它们不相邻。您可以使用此jQuery代码：

$('a').hover(function(){
    $('[href='+$(this).attr('href')+']').toggleClass('hover')
})

将类悬停切换到适当的锚点。只需将您的CSS :hover更改为.hover。

小提琴：http://jsfiddle.net/AKtRe/5/

Answer 3

您想要的功能实际上可以使用纯CSS，它只需要更多的工作。以下是与您的第一个几乎相同的设计，具有您想要的附加功能。底部包含一个JSFiddle链接。

请注意，这个答案并不是一个纯粹实用的方法（因为其他答案表明只需几行jQuery即可实现所需的功能），而是作为一种信息方法; CSS定位练习。

HTML：

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

我在这里做的是把你的两个名单分成三个;现在，您不必拥有拇指列表和文本链接列表，而是每个客户端都有一个列表，最终结果是相同的，您可以从下面的JSFiddle链接中看到。

现在，我必须真正破解CSS才能让它看起来一样。最重要的是，只要您愿意做更多工作来定位，就可以使用纯CSS 实现功能。毕竟，你从来没有说过它不会丑陋！ （或无响应）

CSS：

ul {
    list-style: none;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

li:first-child a {
    display: block;
    height: 100px;
    width: 100px;
    background: #ccc;
    text-decoration: none;
    color: black;
    margin-left: 8px;
    margin-top: -2px;
}

#client-thumb1 li:first-child {
    position: absolute;
    top: 10px;
    left: 10px;
}

#client-thumb2 li:first-child {
    position: absolute;
    top: 10px;
    left: 130px;
}

#client-thumb3 li:first-child {
    position: absolute;
    top: 10px;
    left: 250px;
}

#client-thumb1 li:last-of-type a, #client-thumb2 li:last-of-type a, #client-thumb3 li:last-of-type a {
    position: absolute;
    left: 365px;
    line-height: 10px;
}

#client-thumb1 li:last-of-type a {
    top: 10px;
    width: 70px;
}

#client-thumb2 li:last-of-type a {
    top: 30px;
    width: 70px;
}

#client-thumb3 li:last-of-type a {
    top: 50px;
    width: 70px;
}

ul#client-thumb1:hover li:first-child a {
    background: red;
    color: white;
}

ul#client-thumb2:hover li:first-child a {
    background: red;
    color: white;
}

ul#client-thumb3:hover li:first-child a {
    background: red;
    color: white;
}

长话短说，我基本上只是使用position: absolute和li伪选择器将first-child应用于last-of-type元素，以区分缩略图链接和文字链接。

<强> JSFiddle Example

感兴趣的是， JSFiddle Implementation 与 Ryan Kinal 不同，它使用更少的代码来实现大致相同的输出。它只是向您展示一个人的代码总是可以优化。

Answer 4

您需要为每个“客户”提供他们自己的班级

所以两个li都会有class =“client-one”，class =“client-two”等...

然后在jQuery中你可以通过classname选择它们并改变它们的风格

var whichever = "one";
$(".client-" + whichever).css({"background": "red", "color": "white"});

Answer 5

您可以使用jQuery＆＃39; .hover()查找使用attribute selector找到相关的拇指：

Demo

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

Answer 6

我也对此进行了拍摄：

小提琴：http://jsfiddle.net/AKtRe/10/

$("#client-list a").mouseover(function(){
    var r = $(this).parent().index();
    $("#client-thumb li:eq(" + r + ") a").css("background","red").css("color","white");
});

$("#client-list a").mouseout(function(){
    var r = $(this).parent().index();
    $("#client-thumb li:eq(" + r + ") a").css("background","#ccc").css("color","black");
});