当我在 div 上 hover

Question

当我在 div 上执行 hover 时，我希望封面艺术的效果不会开箱即用，并像在个人资料图片中那样发挥作用。 他们目前正在移动，当他们一一经过时，你能帮忙吗

 .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 fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a> </div> </div>

Answer 1

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

 .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 fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a> </div> </div>

Answer 2

 .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 fs-12">Fifa 07...</p> <a href="javascript:;" class="btn btn-sm btn-inverse float-right">Button</a> </div> </div>

你好，首先谢谢。 当国际足联是 07 并且按钮是 hover 时，我希望所有 hover 都能工作