Question

我有一个H1元素，标准颜色为白色。这个元素在我的上部导航栏中。滚动页面时，导航栏背景颜色会改变，文本的颜色也会改变。因此，文字颜色从白色变为黑色。为了实现这一点，我的javascript只是在设置颜色：黑色的元素中添加了内联样式标记。

还有一个悬停状态定义。当用户将鼠标悬停在H1元素上时，颜色变为darkorange 。由于内联样式标记设置为黑色，因此忽略悬停在其上时设置的颜色的CSS属性，更好地说内联样式位于CSS属性之上。

我该如何解决这个问题？

让h1children = document.getElementById（'divNavigationContainer'）。getElementsByTagName（'h1'）; 让achildren = document.getElementById（'divNavigationContainer'）。getElementsByTagName（'a'）;

        if (window.scrollY) {
            document.getElementById('divNavigationContainer').style.backgroundColor = 'white';
            document.getElementById('divNavigationContainer').style.borderBottom = '1px solid darkorange';

            for(let i=0;i<h1children.length;i++) {
                h1children[i].style.color = 'black';
            }
            for(let i=0;i<achildren.length;i++) {
                achildren[i].style.color = 'black';
            }
        } else {
            document.getElementById('divNavigationContainer').style.backgroundColor = 'transparent';
            document.getElementById('divNavigationContainer').style.borderBottom = 'none';

            for(let i=0;i<h1children.length;i++) {
                h1children[i].style.color = 'white';
            }
            for(let i=0;i<achildren.length;i++) {
                achildren[i].style.color = 'white';
            }
        }

CSS：

    .aNavigationObjectText:hover {
        color:darkorange;
     }

    .aNavigationObjectText {
       float: right;
       position: relative;
       cursor: pointer;
       font-family: Arial;
       font-weight: unset;
       font-size: 15px;
       color: white;
       margin-left: 15px;
       margin-right: 15px;
       margin-top: 20px;
       text-decoration: none;
       transition: color .2s ease-in-out;
     }

修改

我的问题通过简单的！important 标记解决了！

     .aNavigationObjectText:hover {
        color:darkorange !important;
     }

Answer 1

！important 有效。不使用！important ！您可以在网上搜索一长串原因。

将内联CSS和常规CSS混合起来也不是一个好主意。我的建议是将CSS类应用于元素：

document.getElementById("MyElement").className = "MyClass";

如果您这样做，那么您的悬停样式将无效！重要。

设置内联样式时，CSS悬停效果不起作用

1 个答案: