html - CSS 悬停在 div 上不起作用

Question

我似乎无法让 CSS 监听 :hover。

我有以下 CSS:

<style>
    .hidescroll
    {
    }    
        .hidescroll :hover 
        {
            overflow-x: auto;
        }
</style>

和 html:

<div class="hidescroll" style="width:100%; height:100px; background-color:green;  overflow-y:hidden; overflow-x:hidden;">
    <div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>

我希望当我将鼠标悬停在 div 上时会出现滚动条。事实并非如此。为什么？ (我尝试在 :hover 之前添加 div，但这也没有帮助。)

Answer 1

内联样式具有更高的特异性。您要么必须在悬停声明中说!important，要么将样式从内联中移开。我推荐后者。