当我将鼠标悬停在div上时-编程知识-白鹭情

当我将鼠标悬停在 div 上时，我希望封面艺术的效果不会立即溢位并像在个人资料图片中那样发挥作用。他们一一经过时正在移动，你能帮忙吗？

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div class="card kingbox">
  <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div class="princebox" style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div class="x" style="padding: 15px;">
    <h6 class="card-title">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1">
    </h6>
    <p class="card-text f-s-12">Fifa 07...</p>
    <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a>
  </div>
</div>

uj5u.com热心网友回复：

溢位：按照建议隐藏似乎可以解决问题

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
  overflow:hidden;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div class="card kingbox">
  <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div class="princebox" style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div class="x" style="padding: 15px;">
    <h6 class="card-title">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1">
    </h6>
    <p class="card-text f-s-12">Fifa 07...</p>
    <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a>
  </div>
</div>

uj5u.com热心网友回复：

.card {
  box-shadow: inset -2px 2px 20px 1px #0a031a7a;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
  border-radius: 15px;
  background: gray;
  width: 460px;
  overflow:hidden;
}

.kingbox:not(.not-hoverable) {
  cursor: pointer;
}

.kingbox:hover>.queenbox:hover {
  background-color: rgba(9, 20, 26, 0.8);
}

.kingbox .queenbox:hover {
  transform-origin: center;
  transform: scale(1.075);
}

.queenbox {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  width: 460px;
}

.princebox:hover {
  transform-origin: center;
  transform: scale(0.95);
}

.princebox {
  width: 70px;
  height: 70px;
  border-radius: 15px;
  position: relative;
  margin-top: -40px;
  left: 25px;
}

.img1 {
  width: 50px;
  object-fit: contain;
  margin-top: 5px;
}

.kingbox {
  box-shadow: 0 0 0 1px transparent;
  margin: 1px;
  transition: background-color .15s, box-shadow .15s;
}

<div class="card kingbox">
  <img class="queenbox" src="https://cdn.ntvspor.net/083b3a697b6f48b48e59e770630cfdd5.jpg?crop=0,48,940,577&w=1200&mode=crop" alt="" style="" loading="lazy">
  <div class="princebox" style="background: url(https://sportpng.com/wp-content/uploads/2020/01/Cristiano-Ronaldo-sportpng-3.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;">
  </div>
  <div class="x" style="padding: 15px;">
    <h6 class="card-title">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/FIFA_series_logo.png" class="img1">
    </h6>
    <p class="card-text f-s-12">Fifa 07...</p>
    <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a>
  </div>
</div>