HTML

Question

我可以在悬停另一个div元素时更改div元素的大小，就像这个例子一样。 https://jsfiddle.net/9510a6kj/

 .left, .right{
        float:left;
    }

    .left{
        background: red;
        width: 200px;
        height: 300px;
        transition: width 1s ;
    }

    .right{
        background: blue;
        width: 300px;
        height: 300px;
        transition: width 1s;
    }

    .left:hover{
        width: 300px;
    }

    .left:hover + .right{
        width: 100px;
    }
    </style>

但是当悬停第一个元素时，可以改变两个不同div元素的大小。

例如，在鼠标悬停div＆＃34; a＆＃34;上，更改div的大小＆＃34; b＆＃34;和div＆＃34; c＆＃34;。

谢谢。

Answer 1

是的，您可以使用兄弟选择器来完成。虽然您在小提琴中使用的相邻兄弟选择器将在DOM中紧跟其后的元素样式，但兄弟选择器将为所有兄弟元素设置样式，只要它们遵循 .a。

HTML

<div class="parent">
   <div class="a"></div>
   <div class="b"></div>
   <div class="c"></div>
</div>

CSS

.a:hover ~ div{
 //style .b and .c here
}

请注意，兄弟选择器仅适用于跟随的兄弟姐妹...它不会在您的参考元素之前为兄弟姐妹工作。 CSS目前还无法恢复DOM树。

Answer 2

是的，与兄弟选择者（如果他们是兄弟姐妹）

.a {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}

.b {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: blue;
  transition: all 1s;    }

.c {
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: yellow;
  transition: all 1s;
}

.a:hover~.b {
  height: 160px;
}

.a:hover~.c {
  height: 120px;
}

<div class="a">hover me</div>
<div class="b">b b b b b</div>
<div class="c">c c c c c</div>

Answer 3

这完全取决于这些元素之间的关系。

1。如果他们是兄弟姐妹并且一个接一个地使用<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp1" mc:Ignorable="d" Title="MainWindow" Height="400" Width="400" > <StackPanel Margin="10, 10, 10, 10"> <CheckBox Content="CheckBox" Margin="0, 0, 0, 10"/> <Button Content="Button" Height="30" Click="OnClick"/> </StackPanel> </Window>也用于+ div。见下文

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover + .b {
  background: blue;
}

.a:hover + .b + .c {
  background: red;
}

2。如果他们是兄弟姐妹，<div class="a"> a </div> <div class="b"> b </div> <div class="c"> c </div>和b c后，而不是一个接一个，使用a

~

div { height: 50px; width: 50px; border: 1px solid black } .a:hover ~ .b { background: blue; } .a:hover ~ .c { background: red; }

3。如果<div class="a"> a </div> <div> </div> <div class="b"> b </div> <div> </div> <div class="c"> c </div>和b在 c之后，但不在之后，a是在c之后，您可以将b与~

一起使用

+

div { height: 50px; width: 50px; border: 1px solid black } .a:hover ~ .b { background: blue; } .a:hover ~ .b + .c { background: red; }

如果他们是孩子，您可以使用<div class="a"> a </div> <div> </div> <div class="b"> b </div> <div class="c"> c </div>或a:hover b,a:hover c（直接孩子），然后您可以添加上述兄弟选择器。

正如我所说，有很多可能性。这一切都取决于结构。但只有当>和b位于dom树中的c之后，您才能使用CSS执行此操作。

纯CSS，div悬停可以影响多个元素

3 个答案:

HTML

CSS