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

Question

我正在尝试创建一个按钮的效果，该按钮在滚动时从页面上“抬起”。

使用 CSS，我有一个 block 样式 <a>元素，当悬停时，将自身重新定位到左侧5px，并在后面留下阴影:

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

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

问题:当 <a>在悬停期间 block 跳离光标 5px，光标实际上不再悬停在 block 上，然后当光标仅稍微移动后 block 跳回。

如何保持原来的悬停区域，使元素在光标轻微移动时不会一直来回跳动？

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

Answer 1

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