3

div を使用して本当に単純なボタンを作成しようとしています。マウスカーソルがボタンの上に移動すると、テキストが黒くなり、背景色が白くなることを除いて、すべて問題ありません...しかし、現在、マウスカーソルをテキストの上に置いて、黒くなるのを確認する必要があります。

これが私のCSSコードです:

.pledges_boutons {
    width: 157px;
    color: #fff;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 11px;
    height: 18px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    display: block;
    background-color: #868686;
    }

とホバー：

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}​

HTML:

<div class="pledges_boutons">
   <a href="http://www.google.com">Click here</a>
</div>​

ここに私のフィドルがあります

ありがとうございました！

4

4 に答える 4

8

交換：

.pledges_boutons:hover {

と：

.pledges_boutons:hover, .pledges_boutons:hover a {

それはトリックを行います;-)

于 2012-09-28T17:29:43.223 に答える
3

これを処理するにはさまざまな方法がありますが、基本的には、親がホバーされたときにアンカーのスタイルをオーバーライドするのに十分な特定のセレクターを提供する必要があります。

例: http://jsfiddle.net/6JCWn/1/

.pledges_boutons:hover a {
    color: #000;
}
于 2012-09-28T17:30:22.970 に答える
1

これは、リンクを具体的に白くスタイリングしているためです。

.pledges_boutons a:link {
    text-decoration:none;
    color:#fff;
}

リンクは、以下よりも具体的なセレクターを使用して白くスタイル設定されています。

.pledges_boutons:hover {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}​

だからあなたがしたいのは、それをに変更することです

.pledges_boutons:hover,
.pledges_boutons:hover a {
    color: #000;
    cursor: pointer;
    background-color: #fff;
}​

これを行ったら、冗長になるため、すぐ上のルールを削除できます。

.pledges_boutons a:hover {
    color:#000;
    background-color:white;
}
于 2012-09-28T17:32:46.070 に答える
-1

ctrl+F5ブラウザのページ キャッシュをクリアします。ブラウザは css ファイルをキャッシュします。

于 2012-09-28T17:31:37.010 に答える