当我有内联样式时，CSS中的悬停属性不起作用

我曾经在HTML文档上工作过，但我想将hover属性用于 HTML： div元素，但它不起作用。这里的HTML的div和我用当我有内联样式时，CSS中的悬停属性不起作用

<div style="opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;"> 
    <p style="font-size: 4em; font-family: verdana; font-weight: blod; text-align: center; color: rgba(112,79,196,1); text-shadow: 5px 5px 2px #000; padding: 10px;"> Special Effects</p> 
</div>

，并在内部CSS样式CSS的CSS样式：

div:hover {background-color: red;}

但它没有工作，直到我删除了div元素的风格，创造了内部风格类似这样的HTML元素选择：

div {opacity: 0.8; background-color: #559FED; width: 600px; margin: 0 auto; border-radius: 0px 100px;} 
    div:hover {background-color: red;}

然后它的工作，但谁能告诉我，为什么它不工作的第一次？

来源

2015-06-20 Taro_Naza

工作http://jsfiddle.net/soledar10/7zjsdzyq/ – Dmitriy

可能回答你的问题：http://stackoverflow.com/questions/1033156 /如何到写ahover功能于直列CSS @Taro_NAZA –

@surajrawat谢谢 –

内联样式具有最高优先级。如果您需要在CSS覆盖，需要使用!important

div:hover {background-color: red !important;}

来源

2015-06-20 16:19:46

内联样式可以通过!important重写，因为他们需要更多的重视。

div:hover {background-color: red !important;}

有点关于特异性。

既然你有style属性，它会覆盖所有其他的事情！这是一个罪使用!important：

来源

2015-06-20 16:21:58

当我有内联样式时，CSS中的悬停属性不起作用

回答

相关问题