gpt4 book ai didi

javascript - 悬停推送内容

转载 作者:太空宇宙 更新时间:2023-11-04 14:14:28 26 4
gpt4 key购买 nike

当我将鼠标悬停在图像上时,我将其设置为显示边框半径,因为我有一个背景图像,而且您不能使边框半径透明这一事实我将其删除,这导致了一个很酷但意外的效果。当您将鼠标悬停在图像上以显示半径和添加的填充时,它会将页面的其余部分向下推。

无论如何,我是否可以将效果保留在页面的特定部分,以便它向下移动文本和内容框,但阻止它向下插入整个页面。这是我的代码,但要获得真实示例,请提供站点链接,谢谢!

.service img#dev:hover{
border: 3px solid #76c2af;
border: 3px solid #76c2af;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius: 80px;
padding:10px;
transition: all 0.5s ease-in-out 0s;
}

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 service" style="text-align:center;">
<img id="dev" src="assets/imgs/dev.png">
<div class="serviceDescription">
<h3 class="service-title">Hand Crafted</h3>
<p class="service-description">
All of my projects are hand crafted and utilize the latest in web technology. My work boasts a clean & compliant markup and you are rewarded with unquestionable level of perfection.
</p>
</div>
</div>

Live preview here

最佳答案

例如

.service img{
border: 3px solid transparent;
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius: 80px;
padding:10px;
transition: all 0.5s ease-in-out 0s;
}

休息没问题:)

关于javascript - 悬停推送内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20461083/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com