如果另一个元素被悬停，悬停该元素。

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>

- chris a

---

您不能拥有具有相同ID的多个元素。 - Samuel Liew

我可以使用它，但我不知道需要/使用什么代码。 - chris a

Answer 1

尝试像这样做些事情：

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

演示：Fiddle

- Arun P Johny

---

这是CSS中的“兄弟选择器”。 - Arun P Johny

非常好，谢谢！但是出于某种原因，如果我将其修改为在选择器框中悬停时除第二个选择器框（selector2）以外的任何内容都不起作用？ - chris a

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

- Samuel Liew

Answer 3

使用CSS只能在“目标”元素位于悬停元素内部时才能实现。

在您的情况下，您应该将布局更改为按列排列，而不是按行排列，这样您就可以在其选择器上悬停时更改box1的外观：.selector:hover .box1 {...}

如果您无法这样做，则必须使用Javascript。

请记住，您无法使用Javascript触发:hover，您需要在鼠标进入选择器时向框添加类，并在鼠标退出时删除类。

- Tobia