Question

我将 2 divs 与不同的图像彼此相邻。
一个将被称为“ Land ”，另一个将被称为“ Property ”。
悬停时，我想消耗悬停div的宽度（从50％到75％）。
我设法使它与左div一起工作，但没有使用正确的div。
怎么样？为什么？在没有成功的情况下捆绑很多东西。

<body>
<div class="container-fluid">
  <div class="size" id="proprety">
    <h1>Propreties</h1>
    <p>The best of the proprety</p>
  </div>
  <div class="size" id="land">
    <h1>Land</h1>
    <p>The best of the proprety</p>
  </div>
</div>
</body>

.size{
height:600px;
overflow:hidden;
-webkit-transition: width .2s;
float:left;
background-repeat:no-repeat;
}

.borders{
padding:10%;
}

#proprety{
background-image:url(proprety.jpg);
width:50%;

}

#land{
background-image:url(land.jpg);
-webkit-transition: width .2s;
width:50%;
}

#proprety:hover{
width:75%;
}

#proprety:hover + #land{
width:25%;
}


#land:hover{
width:75%;
}

#land:hover + #proprety{
width:25%;
}

到目前为止： https://jsfiddle.net/Chloe75/akbqxc2v/

Answer 1

简答：元素+元素选择器仅适用于前向元素，而不是像

中使用的那样向后

#land:hover + #proprety{
    width:25%;
}

由于#land位于#proprety之后，它不会像你想要的那样工作。

你可以使用flexbox模拟这个：

＆＃13;

.size{
	height:200px;
	overflow:hidden;
	-webkit-transition: width .2s;
	float:left;
	background-repeat:no-repeat;
}

.borders{
	padding:10%;
}

#proprety{
  background-color:blue;	
  width:50%;	
}

#land{
	background-color:green;
	width:50%;
}

#proprety:hover, #land:hover{
	width:75%;
}

div.container-fluid {
    display: flex;
}

＆＃13;

<body>
<div class="container-fluid">
  <div class="size" id="proprety">
    <h1>Propreties</h1>
    <p>The best of the proprety</p>
  </div>
  <div class="size" id="land">
    <h1>Land</h1>
    <p>The best of the proprety</p>
  </div>
</div>
</body>

＆＃13;

在HOVER上改变DIVS的WIDTH彼此相邻

1 个答案: