我的工作在一个迷你 计划 我把所有的东西都做了最后的修饰,由于某些原因,大部分的地方我已经把 "光标:指针;不再工作。具体来说,搜索栏和它的组件,以及方块菜单按钮和登录按钮。
我试着添加了一些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;
}
任何帮助或指导是非常感激的。