头像鼠标候选切换为想要的文字

2023年5月10日#CSS #xlog #美化301

AI 生成的摘要

这段代码是用来实现鼠标滑向博主头像时，将头像切换为想要的文字。代码中使用了CSS的伪元素和背景图像，当鼠标悬停在头像上时，会显示出文字“NCS.FUN”。

不上图了，鼠标滑向博主头像就好

/*--头像鼠标候选切换为想要的文字*/
.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:after {
  width: 100%;
  height: 100%;

}

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

}