html - 需要帮助理解为什么 css cursor:pointer; 适用于某些元素而不适用于其他元素

Question

我正在做一个迷你项目（也不是移动友好的），我正在重建谷歌的搜索结果页面，只是为了进行一些练习。我正在对所有内容进行最后润色，出于某种原因，大部分我放的地方'光标：指针; 不再工作。具体来说，搜索栏及其组件，以及方形菜单按钮和登录按钮。它适用于顶部导航和页面上的所有链接。

我尝试添加一些css重置，但没有运气。还尝试添加光标：继承到不同的元素，但没有骰子。

这是html的一些片段：

            <div class="logo">
                <img class="google-logo" src="images/logo.png">
            </div>
            <div class="search">
                <form class="search-form">
                    <div class="searching">
                    <i class="fas fa-search"></i>
                    </div>
                    <input class="search-bar" type="text" name="search">
                    <img title="Search by Voice" class="search-mic" src="images/svb2.png"/>
                    <div class="clear">
                    <i class="fas fa-times"></i>
                    </div>
                </form>
            </div>
<div class="move-right">
                <li>
                    <svg class="square-menu" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="24" height="24"
viewBox="0 0 172 172"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#cccccc"><path d="M21.5,21.5v28.66667h28.66667v-28.66667zM71.66667,21.5v28.66667h28.66667v-28.66667zM121.83333,21.5v28.66667h28.66667v-28.66667zM21.5,71.66667v28.66667h28.66667v-28.66667zM71.66667,71.66667v28.66667h28.66667v-28.66667zM121.83333,71.66667v28.66667h28.66667v-28.66667zM21.5,121.83333v28.66667h28.66667v-28.66667zM71.66667,121.83333v28.66667h28.66667v-28.66667zM121.83333,121.83333v28.66667h28.66667v-28.66667z"></path></g></g></svg>
                </li>
                <li>
                    <button class="sign-in-btn">Sign In</button>
                </li>
                </div>
        </div>

和CSS：

.top-container {
    height: 50px;
}

.search {
    position: absolute;
    display: inline-block;

}

.logo {
    display: inline-block;
    width: 100px;
    cursor: pointer;  
}

.search {
    top: 10px;
    left: 160px;
    width: 100%;
    max-width: 500px;
    min-width: 200px;
    display: block;
    cursor: pointer;

}

.search-form{
    width: 100%;
    max-width: 500px;
    min-width: 200px;
    cursor: pointer;

}

 .search-mic, .clear {
    position: absolute;


}

.search-bar {
    width: 99vh;
    height: 45px;
    border: 1px solid lightgray;
    border-radius: 20px;
    cursor: inherit;

}

.search-bar:hover{
    box-shadow: 2px 2px 8px #5f6368;
}

.searching {
    display: inline-block;
    position: absolute;
    top: 12px;
    right: -180px;
    font-size: 16px;
    color: #4285F4;

}


.search-mic {
    top: 12px;
    width: 36px;
    right: -130px;
    border-left: 1px solid lightgray;
    padding-left: 20px;
    cursor: pointer;

}

.clear{
    top: 12px;
    font-size: 20px;
    font-weight: 1px;
    right: -65px;
    color: grey;
    cursor: pointer;
}

.move-right{
    position: absolute;
    top: 12px;
    right: 0px;
}
#top {
     width: 100%;
     height: auto;
}

非常感谢任何帮助或指导。

标签： htmlcsscursor-position