2

Hi HTML5 / css guru'es

I'm trying to make use of some "new" features presented by HTML5 however I have stumpled uppon a problem with changing my links background on hover when having block elements inside the tag.

This is my test code: 

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

According to html5doctor (article) it should be straight forward but I just can't change the background on when hovering.

I made this fiddle to show the difference when using my test html: http://jsfiddle.net/vJEEn/

As the fiddle shows I can make changes to the text, but not the background-color

hope you can help me changing the background on hover

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 回答