将鼠标悬停在嵌套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 。 但是由于必须摆脱这一点，所以我不确定如何解决布局中造成的混乱

Answer 2

上面的css在我的chrome浏览器中运行良好。 这是工作的jsfiddle 。

.navDiv:hover {
    cursor: pointer;
}

调试技巧：

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