将 div 和部分内的跨度转换为跨度

问题描述

我试图在悬停时翻译一个跨度，但唯一不起作用的过渡是翻译。

<section>    
     <div class="clipboard">
          <span id="cp">copy to Clipboard!</span>
     </div>    
</section>

section .clipboard{
    margin-top: 50px;
    margin-bottom: 20px;
    
}
.clipboard #cp{
    font-family: 'Nunito',sans-serif;
    font-size: 16px;
    font-weight: bold;
    transition: 0.3s;
    
    
    
    
}
#cp:hover{
    transform: translateY(-2px);
    text-decoration: underline;
    color: rgb(155,44,175);
    
}

也许我这里的 CSS 语法是错误的，或者我不知道，但是当悬停时，文本颜色和下划线起作用。提前致谢！！！

解决方法

As stated by this comment 对具有块级显示的元素进行转换。

因此将您的代码更改为：

#cp:hover{
    transform: translateY(-2px);
    text-decoration: underline;
    color: rgb(155,44,175);
    display:  inline-block;
}

将解决您的问题。

hover html