Question

我创建了三个div并将它们连成一行。一旦鼠标悬停在它们上方，我想让它们的高度增加。例如，我将鼠标悬停在＆＃34; div2＆＃34;和＆＃34; div2＆＃34;垂直扩展。当我从div区域移除我的鼠标时，它会折叠回来。问题是，一切正常，但出于某种原因，当我将鼠标悬停在＆＃34; div1＆＃34;它垂直扩展，但剩下的两个div消失了。当我将鼠标悬停在＆＃34; div2＆＃34;它与＆＃34; div1＆＃34;垂直扩展仍然在那里，但现在＆＃34; div3＆＃34;消失。当我将鼠标悬停在＆＃34; div3＆＃34;一切正常。我有一种感觉，这与＆＃34;位置＆＃34;属性。

谢谢

＆＃13;

#div1 {
  width: 416px;
  height: 40px;
  position: relative;
  top: 95px;
  left: -290px;
  background-color: red;
  text-indent: -40px;
}

#div2 {
  width: 417.5px;
  height: 40px;
  position: relative;
  top: 55px;
  left: 126px;
  background-color: yellow;
}

#div3 {
  width: 416px;
  height: 40px;
  position: relative;
  top: 15px;
  left: 543.5px;
  background-color: green;
  text-align: center;
}

#div1:hover {
  width: 416px;
  height: 110px;
  position: relative;
  top: 25px;
  left: -290px;
  background-color: red;
  text-indent: -40px;
}

#div2:hover {
  width: 417.5px;
  height: 110px;
  position: relative;
  top: -15px;
  left: 126px;
  background-color: yellow;
}

#div3:hover {
  width: 416px;
  height: 110px;
  position: relative;
  top: -55px;
  left: 543.5px;
  background-color: green;
  text-align: center;
}

＆＃13;

<div id="div1">Some text</div>
<div id="div2">Some text</div>
<div id="div3">Some text</div>

＆＃13;

Answer 1

您只需使用display:inline-block;和vertical-align:top尝试使用演示

即可

＆＃13;

.hover {
    width: 24%;
    height: 100px;
    display: inline-block;
    background: #5A98A4;
    vertical-align: top;
}
.hover:hover {
    height: 200px;
    vertical-align: top;
    transition-duration:1s;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -ms-transition-duration:1s;
}

＆＃13;

<div class="hover"></div>
<div class="hover"></div>
<div class="hover"></div>

＆＃13;

我已将此应用于您的代码，也请检查此代码段

＆＃13;

#div1 {
  width: 416px;
  height: 40px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: red;
  text-indent: -40px;
}

#div2 {
  width: 417.5px;
  height: 40px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: yellow;
}

#div3 {
  width: 416px;
  height: 40px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: green;
  text-align: center;
}

#div1:hover {
  width: 416px;
  height: 110px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: red;
  text-indent: -40px;
}

#div2:hover {
  width: 417.5px;
  height: 110px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: yellow;
}

#div3:hover {
  width: 416px;
  height: 110px;
  position: relative;
  display: inline-block;
	vertical-align: top;
  background-color: green;
  text-align: center;
}

＆＃13;

<div id="div1">Some text</div>
<div id="div2">Some text</div>
<div id="div3">Some text</div>

＆＃13;

Answer 2

这就是我如何处理你的问题......

将div包装在一个新容器中，然后将其position: relative;
绝对定位div并使用bottom代替top - 这将允许div向上扩展。 bottom属性是95px从div（40px

.container {
  position: relative;
}

.container div {
  position: absolute;
  bottom: -135px;
}

#div1 {
  width: 416px;
  height: 40px;
  left: -290px;
  background-color: red;
  text-indent: -40px;
}

#div2 {
  width: 417.5px;
  height: 40px;
  left: 126px;
  background-color: yellow;
}

#div3 {
  width: 416px;
  height: 40px;
  left: 543.5px;
  background-color: green;
  text-align: center;
}

#div1:hover,
#div2:hover,
#div3:hover {
  height: 110px;
}

删除重复的属性，简化您的CSS。

示例

＆＃13;
＆＃13;
<div class="container"> <div id="div1">Some text</div> <div id="div2">Some text</div> <div id="div3">Some text</div> </div>
＆＃13;
!ip<bs>s/foo/bar/
＆＃13;
＆＃13;
＆＃13;

将鼠标悬停在div上会使其他元素消失

2 个答案: