Question

https://jsfiddle.net/azt1kztr/

<a href="www.google.de">
  <li>
    <div style="width:200px;height:200px;background-color:pink">
    hallo
    </div>
  </li>
</a>

<style>
a:hover{background-color:blue}
</style>

为什么我的盒子在悬停时不会变红？

Answer 1

您正在更改锚标记的背景颜色。更改div的背景。试试这个

a:hover div{background-color:blue}

另外一个选项是你可以像这样直接添加悬停效果到div。

div:hover{background-color:blue}

Answer 2

为什么我的盒子在悬停时不会变红？

该链接确实在悬停时获得红色背景 - 您只是不看到任何一个，因为您的链接只是内容要求的广泛和高 - 并且内容本身有粉红色背景涵盖一切。

制作a元素display:block，然后您会看到div元素的蓝色背景 next 。

或者，如果您想要实际更改div元素的背景，请不要使用style属性设置初始背景，也不要通过CSS规则设置 - 然后使用后代选择器：< / p>

a:hover div { … }

而且仅供参考，您创建了无效的HTML - li只能是列表元素（ul / ol）的子项，而不是a的子项。

Answer 3

首先，您的HTML语法无效，除了dateFormat.format(Calendar.getInstance().getTime());之外，您无法将li元素作为直接子元素嵌套到任何其他元素。

就您的悬停而言，它不起作用，因为您使用内联样式将背景应用于ul元素。此外，您正在编写一个定位div代码而不是a

的选择器

Demo

div

但是，我不会向您推荐上述解决方案。正确的方法是使用a:hover div { /* the dirty way, read ahead for the right way */ background-color: blue !important; }并将ul嵌套在li内，然后取出内联样式并移至样式表。稍后，将悬停样式应用于您想要的目标元素。另外，将列表嵌套在包装器div中。

实现目标的正确方法：

ul

Demo

请确保您在包装器<div> <ul> <li><a href="#">Hello</a></li> </ul> </div> div { height: 200px; width: 200px; background-color: pink; } div:hover { background-color: blue; }上使用类，我只是使用div和div {}仅用于演示目的。

如何在悬停时为我的盒子添加另一种背景颜色？

3 个答案: