1

我有一些元素，它是通过 Jquery 添加的：

$('body').delegate('.tutorial_links', 'click', function(){
        var $tutorial_hider="<a href='#' class='hider_tutorial' data-method='delete' data-remote='true' rel='nofollow' style='display:inline-block; background-color:#68d574;  width:"
        $width=$(this).parent().width()
        $tutorial_hider=$tutorial_hider+$width+"px'></a>"
        $(this).css('display', 'none');
        $(this).before($($tutorial_hider));
    })

其中有相对的CSS：

.hider_tutorial{
    height: 15px;
    vertical-align: -1px;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    padding-top: 0;
}

.hider_tutorial:hover{
 background-color: rgba(214, 19, 84, 0.70);
}

如果只是 CSS 可以hider_tutorial工作，浏览器就看不到 .hider_tutorial:hover（当我在 Chrome 或 Firefox 中检查元素时，什么都没有.hider_tutorial:hover）。

4

2 回答 2

0
  1. 打开开发者控制台
  2. 点击元素
  3. 单击右侧面板中的箭头点 -> 切换元素状态

截图：http: //imgur.com/7ErrNTF

于 2013-06-19T19:22:16.980 回答
0

内联样式优先于所有其他 CSS 规则。也就是说，background-color:#68d574属性中定义的属性比or中的style属性具有更高的优先级。查看这个小提琴并将两个链接悬停。第一个链接按预期更改背景颜色，而第二个链接始终具有其覆盖的颜色。.hider_tutorial.hider_tutorial:hover

有一些方法可以解决这个问题：

  • 使用类而不是手动应用样式。这确保了“正常”优先规则适用（因为没有内联样式优先）并且它使代码更简洁（所有样式都包含在 CSS 文件中，而不是分散在 CSS 和 JavaScript 代码中）。
  • 使用 使background-color属性变得.hider_tutorial:hover重要!important。在我的书中，这更像是一个肮脏的修复，因为当您发现自己需要覆盖某个属性时，!important迟早会适得其反。!important
于 2013-06-19T19:27:39.093 回答