0

我编写了这种样式来更改鼠标悬停时 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

4

4 回答 4

2

问题是只有 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。

于 2013-09-13T12:43:25.060 回答
0

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

.buttonstyle:hover a { color:#FFF; }
于 2013-09-13T12:36:19.543 回答
0

试试这个 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;
}
于 2013-09-13T13:13:37.893 回答
0

在 css 或样式中，带有超链接的文本没有颜色变化： color:inherit;

于 2015-05-18T06:04:38.180 回答