将鼠标悬停在嵌套的div上不起作用

Question

我试图找出原因，当我将鼠标悬停在特定的div上时，没有任何反应，但如果我将鼠标悬停在父div上，则光标会发生变化。

这是HTML：

<div class="navDiv">

    <div class="logbookDropdown">
        <p class="dropdownText">Logbooks</p>
        <div class="dropdownIcon"></div>
    </div>

    <div class="logbookDiv">
        <div class="logbookNameDiv">
            <h1 class="logbookName">YOUR</h1>
        </div>
        <div class="logbookEndDiv">
            <h1 class="logbookEnd">Logbook</h1>
        </div>
    </div>

</div>

CSS：

.logbookDropdown:hover {
    cursor: pointer;
}

上面的CSS不起作用 - 意味着没有任何反应，光标不会改变。

但如果说如下：

.navDiv:hover {
    cursor: pointer;
}

...它确实有效，如：光标改变。

不确定为什么会发生这种情况..

Answer 1

我在float:left的CSS类中有.logbookDropdown。但由于我不得不摆脱它，我不知道如何解决它在布局中造成的混乱

Answer 2

上面的css在我的Chrome浏览器中完美运行。这是工作jsfiddle。

.navDiv:hover {
    cursor: pointer;
}

调试提示：

1. 您可能有其他冲突的css规则覆盖此样式。
2. 检查是否是特定于浏览器的问题。有时事情在不同的浏览器中无法正常工作。