Question

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（article），它应该是直截了当但我无法在悬停时改变背景。

当我使用我的测试html时，我做了这个小提琴来显示差异：http://jsfiddle.net/vJEEn/

正如小提琴所示，我可以对文字进行更改，但不能对背景颜色进行更改

希望你能帮我改变悬停的背景

Answer 1

在您的代码中添加此CSS属性。

a { display: block;}

我认为那就是你要找的东西。

test code

更好的选择：

a { display: inline-block;}

Answer 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>

试试这段代码。

Answer 3

你不能在div里面放置一个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;}

在this fiddle
上查看

Answer 4

尝试将background-color: inherit;添加到DIV样式

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

选中此JSFiddle

Answer 5

在你的CSS中添加这一行也可以正常工作

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

SEE DEMO

但是你不能在一个锚中放置一个div，它不会被w3c验证。

html5阻止链接样式问题

5 个答案:

html5阻止链​​接样式问题

5 个答案:

html5阻止链接样式问题