0

リンクホバーでテキスト装飾を使用しているときに、IE画像の境界線の問題を修正しようとしています。境界線の問題は修正されましたが、装飾はなくなりました。

<a href="home.php" class="menu-links">
<div class="menu-home">Home</div>
<img class="menu-home-logo" src="images/home.png" width="32" height="32">
</a>

css：

.menu-links {
    color:#000;
    text-decoration:none;
}
.menu-links:hover {
    text-decoration:underline;
}
.menu-links img {border: none; }
4

1 に答える 1

1

含めたコードは、InternetExplorerとFirefoxで正しく機能しています。ホバーするとホームに下線が引かれ、画像に境界線がありません。テキストだけでなく画像にも下線を付けたい場合は、ホバー時に画像に追加するのborder-bottomではなく、追加する必要があります。text-decoration

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .menu-links { color:#000; text-decoration:none; }
            .menu-links:hover { text-decoration:underline; }
            .menu-links img { border: none; }
            .menu-links:hover img { border-bottom: 1px solid #000; }
        </style>
    </head>

    <body>
        <a href="home.php" class="menu-links">
            <div class="menu-home">Home</div>
            <img class="menu-home-logo" src="images/home.png" width="32" height="32">
        </a>
    </body>
</html>

それが正しく表示されない場合は、上記で投稿したスタイルに干渉している他のCSSがある可能性があります。Firebugなどのデバッガーを使用してコントロールを分析し、下線が表示されない原因を確認します。

于 2012-08-09T17:18:17.820 に答える