Question

我正在创建一个包含两种不同类型产品的网页。我想通过使用双面板布局来同时展示这两个产品。当光标悬停在一个面板上时，其宽度最多可拉伸80％，而另一个面板的宽度则可缩小到20％。

我已经为面板拉伸和挤压编写了CSS代码。有关更多详细信息，请参阅CodePen。

html代码：

<div class="container">
  <div class="left_panel">
    left panel
  </div>
  <div class="right_panel">
    right panel
  </div>
</div>

css代码：

.container {
  width: 800px;
  height: 400px;
}

.left_panel {
  float:left;
  width: 50%;
  height: 100%;
  background-color: red;
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.right_panel {
  float:left;
  width: 50%;
  height: 100%;
  left: 50%;
  background-color: blue;  
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

.left_panel:hover {
  width: 80%;
}

.right_panel:hover {
  width:80%;
  left:20%;
}

.left_panel:hover + .right_panel {
  width: 20%;
  left: 80%;
}


.right_panel:hover + .left_panel {
  width: 20%;
}

正如您在CodePen中看到的结果一样，left_panel（红色的那个）可以按我预期的那样完美地工作。但是，right_panel（蓝色的）无法正常工作。我希望当光标悬停在蓝色光标上时，红色光标会被挤压，但根本不会移动。

希望对此有所建议。

谢谢。

CSS-具有过渡效果的双面板布局：一种效果很好，但另一种效果不好

0 个答案: