当我具有内联样式时，CSS中的hover属性不起作用 [英] hover property in CSS doesn't work when I have an inline styles

问题描述

我当时正在处理一个HTML文档，我想将hover属性用于
HTML：
div元素，但是它不起作用。这里是我使用的HTML div和CSS样式

I was work on a HTML document and I wanted to use the hover property for a HTML: div element but it didn't work. here the HTML div and the CSS style I used

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

and in the internal CSS style CSS:

div:hover {background-color: red;}

但是直到我从div元素中删除样式并以这种内部样式创建了HTML元素选择器后，它才起作用：

But it didn't work till I deleted the style from the div element and created a HTML element selector in the internal style like this:

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

然后它起作用了，但是谁能告诉我为什么它第一次不起作用？

then it worked, but can anyone tell me why it didn't work the first time ?

推荐答案

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

Inline style have the highest priority. If you need to override in CSS, need to use !important

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

这篇关于当我具有内联样式时，CSS中的hover属性不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！