- <ul>
- <li class="list"
- style="position: relative"
- v-for="(item2,index2) in (item.subSections)" :key="index2">
- {{item2.sectionName}}
- <a-icon type="play-circle" class="pause"
- style="position: absolute;right: 20px;top: 15px;font-size: 20px;"/>
- <span class="look"
style="position: absolute;right: 20px;top: 15px;font-size: 14px;"> 观看 </span>
- </li>
- </ul>
- <style>
- .look{
- display: none;
- }
- .list:hover {
- color: #00cf8c;
- .look{
- display: block;
- }
- .pause{
- display: none;
- }
- }
- }
- </style>
样式如下: 当鼠标放在某一个 li 标签时, 由 "暂停的图标字体" 变成 "观看的字体"
思路: 每个 li 标签都有 "暂停的图标字体" 和 "观看的字体" 这两个内容, 但是只有前者显示, 即后边的设置属性 display:none,
但是当 li 被选中时前者设置属性 display:none, 后者设置属性 display:block
来源: http://www.bubuko.com/infodetail-3716890.html