Question

我环顾四周但找不到合适的答案......如果设置一个元素悬停，假设另一个元素悬停？

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

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

演示：Fiddle

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，您只能在＆＃34; target＆＃34;元素在被徘徊的那个里面。

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

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

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

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

3 个答案: