时间戳

首页 > 解决方案 > 如何在wordpress的类别标题中隐藏鼠标悬停代码？

css - 如何在wordpress的类别标题中隐藏鼠标悬停代码？

问题描述

我想在类别标题的任一侧显示一个图标。这是我的代码：

<i class="fa fa-tree" style="color: #fcae03;"></i> Christmas Hampers <i class="fa fa-tree" style="color: #fcae03;"></i>

该代码有效，但我怎样才能让鼠标悬停时只出现“圣诞礼篮”？

我的代码知识有限，如果他们可以帮助我，有人介意非常具体吗？谢谢！:)

标签： csswordpress

解决方案

如果我理解正确，您只想显示 2 个树形图标并在鼠标悬停（悬停）时显示“圣诞礼篮”。然后试试这段代码。

如果您有任何问题，请发表评论:)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <!-- Probably you don't need to apply this line -->

<div class="christmas-hampers-wrapper">
  <i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
  <div class="christmas-hampers-wrapper inline-block">
    <div class="christmas-hampers">Christmas Hampers</div>
  </div>
  <i class="fa fa-tree inline-block" style="color: #fcae03;"></i>
</div>
<style>
.inline-block{
  position: inherit;
  display: inline-block;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper{
  overflow: hidden;
  display: inline-block;
  width: 0px; height: 18px;
  transition: .3s;
}
.christmas-hampers-wrapper > .christmas-hampers-wrapper > .christmas-hampers{
  width: 127px;
}
.christmas-hampers-wrapper:hover > .christmas-hampers-wrapper{
  display: inline-block;
  width: 127px; height: 18px;
}
</style>

推荐阅读