转换更新

Question

我知道你可以将鼠标悬停在一个div之后直接影响div，然后使用'+'和'〜'之后的任何div。但是我有一种情况，我需要在div之前和之后直接使用div我会徘徊受到影响。我想要做的是在悬停时生长4个圆圈（工作正常），相邻的圆圈应该被推到一边。

这是一个可能使我想要做的更明显的codepen： http://codepen.io/anon/pen/Bojug

以下是一段代码问题。

#circ2:hover + #circ3{
   margin: 100px 0px 100px 8%; 
   }

#circ2:hover ~ #circ1{
   margin: 100px 2% 100px 13%;
   background: blue; 
   }

正如您所看到的，当您将鼠标悬停在第2个圆圈上时，第3个圆圈会被推到一边，但是第1个圆圈不是。有没有人有办法解决这个问题。我知道有些人可能会推荐我不熟悉的JS或JQuery。在那种情况下你能指出我正确的方向吗？此外，我知道有很多线程可以解决类似的问题，但我还没有看到一个问题影响前面的div。提前谢谢！

Answer 1

根据我对你的问题的理解，我认为你想要改变前面的元素，比如post元素。

如果我是正确的，只需使用简单的技术。在悬停时相对移动父母 - ＆gt;

#circles:hover{
    position:relative;
    right:40px;
}

Demo

转换更新

#circles{
    position:relative;
    right:0px;
}
#circles:hover{
    position:relative;
    right:40px;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

Demo 2

Answer 2

我懒得改变你的代码，因为它很大，但是下面的想法应该会有所帮助：

你有

#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd

现在你想影响＃circ1，当circ2被悬停时。

试试这个：

#circ1           //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.

这样，由于＃circ2不是通常徘徊，你会看到标准风格。但是只要将鼠标悬停在它上面，：not（） - 选择器将不再适用 - 并且悬停样式将适用。

使div在悬停时影响先例div？

2 个答案:

Demo

转换更新

Demo 2