Question

我已编写此样式以在鼠标悬停时更改div和文本的颜色。问题出现在带有超链接的文本中。它在Firefox和Chrome中非常完美，但它不适用于IE。我使用的是版本10.

在这需要一些帮助...

这就是风格......

<style type="text/css">
    .buttonstyle {
        height:30px;
        width:200px;
        background-color:#FFF;
        font-family:"Arial";
        font-weight:bold;
        color:#767676;
        cursor:pointer;
    }
    .buttonstyle:hover {
        background-color:#007DBA;
        font-family:"Arial";
        font-weight:bold;
        color:#FFF;
    }
</style>

HTML：

<div class="buttonstyle"><a href="#">Button</a></div>

以下是JSFiddle

Answer 1

问题是只有div的颜色和背景在悬停时才会改变。要获得改变颜色的链接，你需要在CSS中这样说。甚至可能更好地说div的所有子元素都需要在悬停时改变颜色和背景。您可以使用以下样式执行此操作：

.buttonstyle
{
    cursor: pointer;
    font-family: "Arial";
    font-weight: bold;
    height: 30px;
    width: 200px;
}

.buttonstyle *
{
    background-color: #FFFFFF;
    color: #767676;
}

/*
Or use ".buttonstyle:hover, .buttonstyle:hover a"
if it must only apply to links
*/
.buttonstyle:hover, .buttonstyle:hover * 
{
    background-color: #007DBA;
    color: #FFFFFF;
}

查看此JSFiddle

编辑：我已经改变了CSS，以确保链接保持相同的外观，即使点击它之后。还更新了JSFiddle。

Answer 2

如果没有看到小提琴或HTML，很难确切地看到问题是什么，但如果您遇到的问题是.buttonstyle中的链接没有改变颜色，您可以像这样指定它们：

.buttonstyle:hover a { color:#FFF; }

Answer 3

试试这个CSS：

.buttonstyle {
    background-color: #FFFFFF;
    color: #767676;
    cursor: pointer;
    font-family: "Arial";
    font-weight: bold;
    height: 30px;
    width: 200px;
}
.buttonstyle a {
color: #fff;
}
.buttonstyle a:hover {
color: #fff;
}
.buttonstyle a:active {
color: #fff;
}
.buttonstyle a:visited {
color: #fff;
}

Answer 4

使用超链接的文字没有颜色变化，在CSS或风格：颜色：继承;

使用超链接的文本没有颜色更改

4 个答案: