如何实现鼠标悬停按钮时同步激活背景与文字样式？

问题分析 #

当前代码中，仅当鼠标直接悬停在<a>标签上时文字才会变白；鼠标悬停在按钮其他区域时，按钮背景变紫但文字仍为紫色，造成视觉冲突。需要实现鼠标进入按钮区域的瞬间，同步触发背景变色与文字变色。

修改后的完整代码 #

JSX结构（无需改动）

<button className='ctaBtn'>
    <a href={props.url}>Open</a>
</button>

修改后的CSS代码

.ctaBtn{
    border-radius: 5px;
    width: 70px;
    height: 40px;
    padding: 10px;
    border: .5px solid rebeccapurple;
    background-color: white;
    color: rebeccapurple;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    margin-top: 15px;
    margin-bottom: 30px;
}

.ctaBtn:hover{
    background-color: rebeccapurple;
}

/* 核心修改：按钮悬停时直接控制内部a标签的颜色 */
.ctaBtn:hover a{
    text-decoration: none;
    color: white;
}

.ctaBtn a{
    list-style-type: none;
    text-decoration: none;
    color: rebeccapurple;
}

改动说明 #

将原有的.ctaBtn a:hover选择器替换为.ctaBtn:hover a：

• 这个选择器的逻辑是当.ctaBtn元素处于悬停状态时，它内部的所有<a>标签同步应用样式，而非仅<a>自身被悬停时生效。
• 配合保留的.ctaBtn:hover背景变色规则，鼠标一进入按钮区域，就会同时触发背景变紫、文字变白的效果，彻底解决颜色重合问题。

额外优化建议 #

若想让按钮内的<a>标签填充整个按钮区域（避免鼠标在按钮内移动时出现样式跳变），可给<a>标签补充以下样式：

.ctaBtn a{
    /* 原有样式 */
    list-style-type: none;
    text-decoration: none;
    color: rebeccapurple;
    /* 新增样式 */
    display: block;
    width: 100%;
    height: 100%;
    line-height: 20px; /* 根据按钮高度调整，实现文字垂直居中 */
    text-align: center;
}

这样<a>标签会铺满按钮，鼠标在按钮内任意位置都属于悬停状态，交互体验更流畅。

内容的提问来源于stack exchange，提问作者tukitooo1998