2

良い一日！この質問が何度か出されていることを認識しています。ここでいくつかのスレッドを調べましたが、十分ではないようだったので、新しいスレッドを作成することにしました。簡単に言えば、HTML5、CSS3、JavaScript を学習するのは今日で 2 日目です。光沢のあるボタンでメニューを作成したいところです。

ここでのケースは次のとおりです: ボタンは本来あるべきように表示されますが、マウスをボタンの上に置いても色は変わりません。ソースコード全体を掲載します。コードをよりよく理解するために、内部にいくつかのコメントがあります。

ソースコード全体:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<style>

     ul {
      list-style: none;  
        margin: 40px 0;
    }
    li {
        float : left;

        }
    /*This will style the buttons*/
    .buttonStyle {
        width : 60px;
        height : 20px;
       -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        }
    /*This should make them change their color when they are hovered*/
    a.buttonStyle:hover {
         background: #383;
    }
</style>
</head>
<body>
    <!-- custom made list to store the buttons-->
    <ul >
        <!-- Just some buttons to make it look like a menu-->
        <li><input type="button" class="buttonStyle" /></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
    </ul>
</body>
</html>
4

2 に答える 2

4

ホバー スタイルは次のようになります。

a.buttonStyle:hover { background: #383; }

<a>そのため、タグ専用に設定されています。スタイルを変える

.buttonStyle:hover { background: #383; }

したがって、特定のクラスにのみホバーを設定します。その後、動作します。

デモについては、このjsFiddleを参照してください。

于 2013-06-20T16:42:16.163 に答える