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



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

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

代码是有效的,但我怎么能让鼠标悬停上只出现"圣诞篮"呢?

我对代码的了解有限,如果有人能帮助我,是否介意说得很具体?谢谢!:(

如果我理解得对,你只想显示两个树图标,并在鼠标悬停(悬停(时显示"圣诞篮"。然后试试这个代码。

如果你有什么问题,请留言:(

<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>

最新更新