banner
MACSITE

@MACSITE

兴趣是学习的动力,学习也能成为消遣!--你愁啥-ncs.fun

Fix the problem of the article overview floating up and jumping when the mouse moves to the edge of the box.

/--Mouse selection style article summary floats up/
.xlog-post {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* Shadow when the mouse hovers over the box /
transform: translate(0, -10px);/
Box moves up 10px when the mouse hovers over it /
}
Using the code above, when the mouse moves to the edge of the box, the box will jump frequently.
2023-05-15T14-34-11D0-06.gif
However, there is no problem on the archive page because the spacing between the boxes on the archive page is small, and the mouse directly moves to the next box.
So the blogger did not notice it immediately,
The solution is to add time to the floating process.
To ensure adaptation to various pages and avoid similar problems,
Both sections of code need to be added. The modified code is shown below:
/
--Mouse selection style article summary floats up*/
.xlog-post {
transition: all 0.3s;/* Time required for the floating process /
}
.xlog-post {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/
Shadow when the mouse hovers over the box /
transform: translate(0, -10px);/
Box moves up 10px when the mouse hovers over it /
}
.xlog-post {
padding: 1rem;
}
/
---Mouse selection style archive article list floats up*/
.items-center.-mx-2 {
transition: all 0.3s;/* Time required for the floating process /
}
.items-center.-mx-2 {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/
Shadow when the mouse hovers over the box /
transform: translate(0, -5px);/
Box moves up 10px when the mouse hovers over it */
}

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.