Question

我发现如果我们编写内联css（或使用JavaScript添加它），那么我们就会失去css hover的值。是否有可能改变这种行为？

简单示例

<div id="test" style="color: red">test</div>
<style>
#test:hover {
    color:blue;
}
</style>

在这种情况下，悬停不起作用。

更新

我无法使用!important，因为在此之后我将无法通过JavaScript更改该属性。

我也动态生成样式，所以我不能通过JavaScript添加特定的类。

Answer 1

因为内联css会覆盖文件中的css样式如果你有

color: blue !important

它可以工作但不推荐，你可以随时使用jquery删除内联样式标签，但哈哈

更新

使用jquery删除样式标记或使用javascript时...添加！重要，以便内联css具有重要性

Answer 2

我不能使用！重要，因为在它之后我将无法改变通过javascript进行分发。

您仍然可以使用!important，只需使用JavaScript添加一个类，然后随时将其删除。

demo

Answer 3

最简单的方法是以下

$(selector).hover(function() {
                $st = $(this).attr("style");
                $(this).attr("style","");
            },function() {
                $(this).attr("style",$st);
            });

Answer 4

在CSS中，style属性将覆盖任何style元素或stylesheets。如果您无法更改style属性，则必须使用!important。如果您可以完全删除style属性并将所有内容放在style元素中。或者甚至更好，在单独的stylesheet中，您的问题将得到解决。

P.S。 type元素需要style属性。这不会解决您的问题，但您应该将<style>更改为<style type="text/css">

结合内联css和悬停状态，是否可能？

4 个答案:

demo