CSS: reposition element on hover state but maintain clickable area position
- by abirduphigh
I'm trying to create the effect of a button that 'lifts' from the page when rolled over.
Using CSS, I have a block style <a> element that, when hovered, re-positions itself up and to the left 5px, and a shadow is left behind:
a {
display: inline-block;
position: relative; }
a:hover {
top: -5px; left: -5px;
box-shadow: rgba(0,0,0,.2) 5px 5px 2px; }
The problem: When the <a> block jumps 5px away from the cursor during the hover, the cursor is no longer actually hovering over the block and the block then jumps back when the cursor is moved only slightly thereafter.
How can I maintain the original hover area so that the element doesn't keep jumping back and forth when the cursor is only slightly moved?
I'd like to avoid adding superfluous container elements to my code if at all possible.
