转换 div 和部分内的跨度

Question

我试图在悬停时平移跨度，但唯一不起作用的转换是平移。

<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 语法错误或者我不知道，但是当悬停时，文本颜色和下划线起作用。提前致谢！！！

Answer 1

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

因此将您的代码更改为：

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

将解决您的问题。

转换 div 和部分内的跨度

Translate transition a span inside a div and section

html

css

hover