CSS：在悬停状态下重新定位元素但保持可点击区域位置-Java 学习之路

我正在尝试创建一个按钮的效果，该按钮在翻转时从页面“抬起” .

使用CSS，我有一个块样式 <a> 元素，当它悬停时，将自己重新定位到左 5px ，并留下阴影：

a { 
    display: inline-block;
    position: relative;    }

a:hover {
    top: -5px; left: -5px;
    box-shadow: rgba(0,0,0,.2) 5px 5px 2px;    }

The problem: 当 <a> 块在悬停期间从光标跳过5px时，光标不再实际悬停在块上，然后当光标稍后移动时，块会跳回 .

如何保持原始悬停区域，以便在光标稍微移动时元素不会来回跳跃？

如果可能的话，我想避免在我的代码中添加多余的容器元素 .

3 回答

-1

实现此目的的一种方法是使用多余的元素（透明图像或大尺寸的父div） . 当用户在图像上悬停时，使用后代/子选择器，您要求子元素“跳转” . 这可能只适用于最新的浏览器 . 如果您正在考虑跨浏览器兼容性，使用javascript可能是正确的方法 .

回复于 2024-04-29T21:37:05+08:00
0
托盘改变位置属性了吗？固定的例如：
```
a:hover {
 position: fixed;
}
```
回复于 2024-04-29T21:37:05+08:00

您可以使用CSS3延迟来解决此问题

a { 
display: block;
position: relative; 
width:40px;
height:30px;
}

a:hover {
top: -5px; left: -5px;
box-shadow: rgba(0,0,0,.2) 5px 5px 2px; 
-webkit-transition-duration: .2s;
}

回复于 2024-04-29T21:37:05+08:00

CSS：在悬停状态下重新定位元素但保持可点击区域位置

3 回答

相关问题