当我在 div 上 hover
[英]when I hover over the div
问题描述
when I hover over the div, I want the effect of the cover art not to overflow out of the box and to act as it does in the profile picture.
当我在 div 上执行 hover 时，我希望封面艺术的效果不会开箱即用，并像在个人资料图片中那样发挥作用。 They are currently moving when they pass them one by one, can you help他们目前正在移动，当他们一一经过时，你能帮忙吗
.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>
2 个解决方案
解决方案1
0 2021-12-29 23:03:23
overflow:hidden as suggested seems to do the trick溢出：按照建议隐藏似乎可以解决问题
.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>
解决方案2
0 2021-12-29 23:08:51
.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>
Hi, firstly thanks.你好，首先谢谢。 When Fifa is 07 AND the Button is hover where it is, I want all the hover to work当国际足联是 07 并且按钮是 hover 时，我希望所有 hover 都能工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将鼠标悬停在其上时显示隐藏的div I - show hidden div I when hover over it
Div在图像悬停时显示，但当我将其悬停时会闪烁 - Div Displays on Image Hover, But Blinks When I Hover Over It
当我将鼠标悬停在它上时，Div不会保持扩展状态 - Div wont remain expanded when I hover over it
Animation 应该在我 hover 超过 div 时启动 - Animation should start when I hover over the div
我该怎么做 <DIV> 一秒钟以下可见 <DIV> 当我将鼠标悬停在第二个 <DIV> - How can I make one <DIV> visible below a second <DIV> when I hover over the second <DIV>
在悬停时调整大小时显示另一个div - show a div over another when resizing on hover
悬停在外部Div上时褪色 - Fading when hover over an outside Div
Hover 超过另一个 div 时 - Hover over another div when it comes to
更改：之前何时：hover 超过主 DIV？ - Change :before when :hover over main DIV?
滚动鼠标时悬停div闪烁 - Hover div flickers when rolling mouse over
相关标签