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

この 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 または style: color:inherit; で、ハイパーリンクを含むテキストの色を変更しません。

于 2015-05-18T06:04:38.180 に答える