頭像のマウスオーバー候補を希望のテキストに切り替える

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

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

这段代码是关于网站头像鼠标悬停时的效果。当鼠标滑过博主头像时，头像会切换为想要的文字"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";
}