Question

我制作了3个div元素，名称分别为cont1 cont2和cont3，它们里面都有自己的段落和标题，我制作了类似动画的东西，因此，如果将那些conts框阴影之一悬停，那么div的比例会增加，但是div的比例会增加，但是问题是是如果显示是继承的，例如有人悬停了第一个div，则其他两个div也向下移动了

#main div {
  display: inherit;
  position: relative;
}

#main div button {
  margin-top: 120px;
  width: 140px;
  height: 70px;
  background: #49587a;
  border: none;
  border-radius: 15px;
  box-shadow: 2px 4px #2d3342;
  transition: 0.2s;
  font-weight: 600;
  font-size: 1.2rem;
  color: #e4f9e0;
  cursor: pointer;
}

#cont1,
#cont2,
#cont3 {
  width: 290px;
  height: 600px;
  background: rgb(30, 33, 33, 0.85);
  margin-top: 15vh;
  margin-left: 10vw;
  border-radius: 25px;
  transition: 0.35s;
  color: white;
  text-align: center;
  box-shadow: 5px 10px #0c0921;
}

#cont1:hover,
#cont2:hover,
#cont3:hover,
#cont4:hover {
  transform: scale(1.05);
  height: 620px;
  box-shadow: 15px 20px #0c0921;
}

<div id="main">
  <div id="cont1">
    <h1>Basic</h1>
    <p>Buy <span>Basic</span> packet and get:</p>
    <p>300 Minutes Talk</p>
    <p>500 SMS</p>
    <p>5GB NET<a href="google.com" class="ppp"> More info</a></p>
    <button>Buy Now !</button>
  </div>

  <div id="cont2">
    <h1>Premium</h1>
    <p>Buy <span>Basic</span> packet and get:</p>
    <p><span>1000</span> Minutes Talk</p>
    <p>500 SMS</p>
    <p>12GB NET</p>
    <button>Buy Now !</button>
  </div>

  <div id="cont3">
    <h1>Pro</h1>
    <p>Buy <span>Basic</span> packet and get:</p>
    <p><span style="">ULIMITED</span> Minutes Talk</p>
    <p><span>UNLIMITED</span> SMS</p>
    <p>25GB NET</p>
    <button>Buy Now !</button>
  </div>
  <div id="asd">
    <p>Lorem Ipsum</p>
  </div>
  <input>asd
  <button id="btn">add</button>
</div>

Answer 1

只需删除：

#cont1:hover,#cont2:hover,#cont3:hover,#cont4:hover,{
  height: 620px;
}

Codepen（删除的行是第42行）

Div元素错误

1 个答案: