html - 将鼠标悬停在嵌套的 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

我在 .logbookDropdown 的 CSS 类中有 float:left。但是因为我不得不摆脱它，所以我不确定如何修复它在布局中造成的困惑