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上时，我希望滚动条出现。它没有。为什么？（我尝试在div之前添加:hover，但这也没有帮助。）

Answer 1

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

Answer 2

style="..."上的

<div class="hidescroll"优先于<style>块中的单独css规则。

由于您已经拥有 hidescroll 的css规则，请将这些样式放在那里，而不是将它们内联。

<style>
.hidescroll
{
    width:100%;
    height:100px;
    background-color:green;
    overflow-y:hidden;
    overflow-x:hidden;
}    
.hidescroll:hover 
{
    overflow-x: auto;
}
</style>

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

最好还将内部div的样式放入样式规则中。

注意 - !important意在使用用户代理;最终用户使用它来覆盖网站样式，例如我在浏览器中使用它（使用 Stylebot 插件）来修复字体大小和对比度问题以使网站可读）< / p>

停留在div上的CSS无法正常工作

2 个答案: