2

こんにちはHTML5/css guru'es

HTML5によって提供されるいくつかの「新しい」機能を利用しようとしていますが、タグ内にブロック要素がある場合、ホバー時にリンクの背景を変更する際に問題が発生しました。

これは私のテストコードです：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>teeeest</title>
    <link rel="stylesheet" href="saninetto1/css/bootstrap.min.css" />
    <style>
        a:link  { background-color: red; }
        a:hover { background-color: #333; }
    </style>
</head>

<body>
        <div><a href="#">I'm a block</a></div><br />
        <a href="#2"><div>I'm a block 2</div></a>
    </body>
</html>

html5doctor（記事）によると、それは簡単なはずですが、ホバーしたときに背景を変更することはできません。

テストhtmlを使用するときの違いを示すためにこのフィドルを作成しました：http：//jsfiddle.net/vJEEn/

フィドルが示すように、テキストは変更できますが、背景色は変更できません

ホバーの背景を変更するのを手伝ってくれるといいのですが

4

5 に答える 5

3

このCSSプロパティをコードに追加します。

a { display: block;}

それがあなたが探しているものだと思います。

テストコード

より良いオプション：

a { display: inline-block;}
于 2012-07-31T08:43:45.687 に答える
2

コードの小さな変更は、私のすべてのブラウザで機能しています。コードは次のとおりです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>teeeest</title>
<link rel="stylesheet" href="saninetto1/css/bootstrap.min.css" />
<style>
    a:link  { background-color: red; }
    a:hover { background-color: #333; color: red;}
</style>
</head>

<body>
    <div><a href="#">I'm a block</a></div><br />
     <div><a href="#2"><span>I'm a block 2<span></a></div>
</body>
</html>

このコードを試してください。

于 2012-07-31T08:40:41.457 に答える
1

アンカー内にdivを配置することはできません...アンカーはインライン要素であり、ブロックレベルの要素を内部に含めることはできません。

これは検証されません

    <a href="#2"><div>I'm a block 2</div></a>

次のように変更する必要があります

    <div><a href="#2">I'm a block 2</a></div>

そしてそれは

編集

添付したものを読みましたが、HTML5で有効であることがわかりました

CSSを次のように変更する必要があります：

    a:hover div { background-color: #333; color: red;}

そしてそれは変わるでしょう

編集

このCSSを試してください：

    a:hover,
    a:hover div { background-color: #333; color: red;}

このフィドルでそれを見てください

于 2012-07-31T08:33:23.887 に答える
1

background-color: inherit;DIVスタイルに追加してみてください

<a href=""><div style="background-color: inherit;">I'm a block 2</div></a>​

このJSFiddleを確認してください

于 2012-07-31T08:48:08.473 に答える
1

この行をcssに追加すると、それも機能します

a:hover > div { background-color: #333; display: inline-block }

デモを見る

ただし、アンカー内にdivを配置することはできません。これは、w3cによって検証されません。

于 2012-07-31T08:50:52.520 に答える