需要帮助了解为什么css cursor:pointer;对某些元素有效而对其他元素无效。

问题描述 投票:0回答:1

我的工作在一个迷你 计划 我把所有的东西都做了最后的修饰,由于某些原因,大部分的地方我已经把 "光标:指针;不再工作。具体来说,搜索栏和它的组件,以及方块菜单按钮和登录按钮。

我试着添加了一些css重置,但没有成功。我还试着为不同的元素添加cursor: inherit,但没有成功。

这里是一些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;
}

任何帮助或指导是非常感激的。

html css cursor-position
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.