使用锚标签创建的按钮上的悬停效果不正确

Question

我有一个实际上是链接的按钮，即样式锚标记，我无法将其从锚标记更改为输入类型“按钮”。我面临的问题是，当此按钮中的文本悬停时，它可以正常工作，但是，如果悬停是在文本区域之外和按钮内部进行的，则它无法正常工作。以下是相同的按钮外观：

未触摸状态下的普通按钮：

当鼠标悬停在文本区域之外但在框内时：

将鼠标悬停在文本区域上时：

下面是JSP代码：

<jato:content name="ContentHref">
<div class="loginButton btn-red"><auth:href name="LoginURL" fireDisplayEvents='true'><span><jato:text name="txtGotoLoginAfterFail" /></span></auth:href></div>
</jato:content>

下面是样式代码：

.btn-red {
    border: 2px solid #c82127;
    background-color: #ffffff;
    color: #c82127;
}
.btn-red:hover{
    border: 2px solid #c82127;
    background-color: #c82127;
    color: #ffffff;
}

Answer 1

尝试添加以下样式。

.btn-red:hover * {
    color: #ffffff;
}