Question

我试图修改设计中的命名元素。我已经简化了这种情况，你可以在这个小提琴中看到： http://jsfiddle.net/6THpF/

简单地说，当我尝试从另一个中修改一个命名元素时，它可以工作，但是当我尝试从相反方向（其他元素）进行相同的修改时，它不起作用。

以下是示例代码：

body{
    background-color:lightgrey;
}

#div_one, #div_two{
    background-color:darkred;
    display:block;
    width:300px;
    text-align:center;
    padding:30px;
    margin:10px;
    color:white;
    -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;

}
#div_one:hover ~ #div_two{
    background-color:red;
}
#div_two:hover ~ #div_one{
    background-color:red;
}

Answer 1

来自MDN：

〜组合器分离两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素父节点。

因为div_one前面没有div_two，所以第二条规则不起作用。换句话说，没有“前兄弟”选择器。

Answer 2

试试这个。我回答：
HTML：

<div id="div_one">This is div 1</div>
<div id="div_two">This is div 2</div>

CSS：

body{
    background-color:lightgrey;
}

#div_one, #div_two{
    background-color:darkred;
    display:block;
    width:300px;
    text-align:center;
    padding:30px;
    margin:10px;
    color:white;
    -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;

}

JAVASCRIPT：

$(document).ready(function(){
    $("#div_one").mouseover(function(){
    $("#div_two").css("backgroundColor","blue");
    });
    $("#div_one").mouseout(function(){
    $("#div_two").css("backgroundColor","darkred");
    });
    $("#div_two").mouseover(function(){
    $("#div_one").css("backgroundColor","blue");
    });
    $("#div_two").mouseout(function(){
    $("#div_one").css("backgroundColor","darkred");
    });
    });

请记住使用并将jquery.js核心嵌入到您的网页中。

Answer 3

我没有解决兄弟选择器问题（我认为这是无法解决的），但效果是预期的。您需要将两个div组合成一个：

<div>
    <div id="div_one">This is div 1</div>
    <div id="div_two">This is div 2</div>
</div>

现在定位组div的悬停状态：

div:hover #div_two{
background-color:red;
}
div:hover #div_one{
background-color:red;
}

当然后者可以写得更好，（或更短）我只是想在你的例子中尽可能少地改变

这有一些您可能需要解决的缺点。

如果你想让div之间有空格（这个空间不响应悬停），那么我认为你需要将它们改为绝对定位。

请参阅fiddle

<强>编辑

我错过了不要悬停悬停的div的要求。将css更改为

div:hover #div_two:not(:hover){
background-color:red;
}
div:hover #div_one:not(:hover){
background-color:red;
}

现在我认为这就是你想要的edited fiddle

兄弟选择器（代字号）问题

3 个答案: