html - 如果悬停另一个元素，则悬停元素

Question

我环顾四周，但找不到正确的答案......如何将一个元素设置为悬停，假设另一个元素悬停？

假设“选择器”悬停，它将悬停，框 1+2 等...

http://jsfiddle.net/wgJRQ/

<div id="table">
<div id="row">
    <div id="selector">selector 1</div>
    <div id="selector2">selector 2</div>
</div>
<br />
<div id="row">
    <div id="box1">box 1</div>
    <div id="box2">box 2</div>
</div>
<div id="row">
    <div id="box3">box 3</div>
    <div id="box4">box 4</div>
</div>

Answer 1

尝试类似的东西

#box1:hover, #box1:hover~#box2 {
    display: table-cell;
    background-color:#FFFFFF;
    border:2px solid #666666;
    text-align: center;
    vertical-align: middle;
}

演示：小提琴

Answer 2

jQuery：

$('#table > div:first > div')
    .hover(function() {
        $('#table').children('div')
            .eq($(this).index() + 1)
            .children('div')
            .toggleClass('active');
        return false;
    });

http://jsfiddle.net/samliew/pyY5u/

您可能希望优化悬停状态并将其减少为单个声明，如下所示：

#table > div:nth-child(n+1) > div {
    border:2px solid #FFFFFF;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
#table > div:nth-child(n+1) > div:hover,
#table > div:nth-child(n+1) > div.active {
    background-color:#FFFFFF;
    border:2px solid #666666;
}
#box1, #box2 {
    background-color:#E07586;
}
#box3, #box4 {
    background-color:#837C71;
}

Answer 3

使用 CSS，您只能在“目标”元素位于被悬停的元素内时执行此操作。

在您的情况下，您应该将布局更改为按列而不是按行排列，以便在选择器 1内有框 1 和框 2。这样，当您将鼠标悬停在其选择器上时，您可以更改框 1 的外观：.selector:hover .box1 {...}

如果你不能做到这一点，那么你将不得不使用 Javascript。

请记住，您不能:hover使用 Javascript 触发，您必须在鼠标进入选择器时向框添加一个类，并在退出选择器时删除该类。