0

我正在尝试修改设计中的命名元素。正如你在这个小提琴中看到的那样，我已经简化了这种情况：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;
}
4

3 回答 3

2

来自MDN：

~ 组合符分隔两个选择器，并且仅当第二个元素在第一个元素之前时才匹配第二个元素，并且两者共享一个共同的父元素。

因此，因为没有在第二条规则div_one之前是div_two行不通的。换句话说，没有“前一个兄弟”选择器。

于 2013-01-26T20:37:24.960 回答
1

试试这个。我回答：
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核心嵌入到您的网页中。

于 2013-01-26T21:08:03.290 回答
0

我没有解决兄弟选择器问题（我认为无法解决），而是预期的效果。您需要将两个 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 在它们之间有空间（并且该空间不响应悬停），那么我认为您需要将它们更改为绝对定位。

看小提琴

已编辑

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

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

现在我认为这是你想要的编辑小提琴

于 2013-01-27T09:14:03.647 回答