Change the avatar mouse cursor to the desired text.

May 10, 2023#CSS #xlog #美化303

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The code changes the text displayed when hovering over a blogger's profile picture. It uses CSS to position and style the text and image, and changes the content and background image when the mouse hovers over the profile picture.

No need to upload a picture, just hover the mouse over the blogger's avatar.

/--Change the avatar mouse hover to the desired text/
.xlog-site-icon {
position: relative;
display: flex;
}

.xlog-site-icon::before,
.xlog-site-icon::after {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}

.xlog-site-icon:hover::before,
.xlog-site-icon:hover {
width: 100%;
height: 100%;
}

.xlog-site-icon:hover {
background-image('https://xlog.app/_next/image?url=https%3A%2F%2Fipfs.4everland.xyz%2Fipfs%2Fbafkreibiivd46q6qfd6dzri6j6ltw53tzrudcqk7fmxhsj32qbqer7zkra&w=1920&q=75');
content: "NCS.FUN";
}