悬停元素，如果其他元素被徘徊

我环顾四周，但无法找到正确的答案...如何设置元素悬停，假设另一个悬停？悬停元素，如果其他元素被徘徊

如果假设 “选择” 悬停，它会悬停，盒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>

来源

2013-03-17 chris a

你可以使用jQuery吗？ – 2013-03-17 02:38:46

您不能有多个具有相同ID的元素 – 2013-03-17 02:41:37

我可以使用它，但我不知道需要/使用哪些代码。 – 2013-03-17 02:42:32

试着这么做

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

演示：Fiddle

来源

2013-03-17 02:42:06

这是[兄弟选择]（http://reference.sitepoint.com/css/generalsiblingselector） – 2013-03-17 02:54:18

这很好，谢谢！但由于某种原因，如果我修改它，以便它在选择框中悬停，除第二个选择框（selector2）之外的任何东西都不起作用？ – 2013-03-17 03:01:51

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

来源

2013-03-17 03:05:58

使用CSS，你只能做如果“目标”元素位于被徘徊的元素内部。

在你的情况，你应该改变你的布局被安排在列而不是行，让你有框1和箱2 内选择1.这样，你可以改变BOX1的外观，当你悬停在其选择器上：.selector:hover .box1 {...}

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

请记住，您不能触发带有Javascript的:hover，您将不得不在鼠标进入选择器时向框中添加一个类，并在退出该类时删除该类。

来源

2013-03-17 10:13:38 Tobia

悬停元素，如果其他元素被徘徊

回答

相关问题