在 div 和部分中转换跨度 [重复]答案

【问题标题】：Translate transition a span inside a div and section [duplicate]在 div 和部分中转换跨度 [重复]
【发布时间】：2021-07-27 06:39:07
【问题描述】：

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

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

【问题讨论】：

看看here

标签： html css hover

【解决方案1】：

As stated by this comment 转换适用于具有块级显示的元素。

所以把你的代码改成这样：

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

会解决你的问题。

【讨论】：