css - 带有超链接的文本没有颜色变化

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。