/--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.
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 */
}