html - 悬停时更改颜色无法正常工作
问题描述
我想在鼠标悬停时将灰色更改为黑色,因为它在图像上:
但它不能正常工作,它像这样“ https://jsfiddle.net/83vnj5ru/5/ ”工作,搜索输入边框没有被视为一个整体,占位符文本颜色在悬停时没有改变,光标指针是悬停在过滤器 1 和过滤器 2 下拉菜单上时不会出现。你知道为什么吗?
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i {
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover {
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover {
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
}
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
解决方案
采用
.dropdown-toggle:hover{ 颜色:黑色;}
请参阅下面的片段。
.form-group {
margin-bottom: 0 !important;
}
.input-group-text {
color: gray;
}
.input-group-text:hover {
color: black;
}
.filters {
display: inline-block;
color: gray;
font-weight: bold;
}
.filters i{
font-size: 1.1rem;
color: gray;
font-weight: bold;
}
.search-icon {
background-color: #ffffff !important;
border: 2px solid gray !important;
border-right: 1px solid transparent !important;
}
.search-input {
border-left: 1px solid transparent !important;
border: 2px solid gray;
color: gray;
}
.search-icon:hover{
border-left: 1px solid transparent !important;
border: 2px solid black;
}
.search-input:hover{
border: 2px solid black;
}
.dropdown-toggle::after {
display: none;
color:black;
}
.dropdown-toggle:hover{
color:black;
}
input:hover::-webkit-input-placeholder {
color: black;
}
/* Firefox < 19 */
input:hover:-moz-placeholder {
color: black;
}
input:hover::-moz-placeholder {
color: black;
}
input:hover:-ms-input-placeholder {
color: black;
}
HTML:
<div class="bg-custom-gray-dark">
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row align-items-center">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text search-icon"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-input p-0" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search...">
</div>
</div>
</form>
<div class="col-7 text-right">
<div class="dropdown filters mr-3">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 1 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
<div class="dropdown filters">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Filter 2 <i class="fa fa-angle-down"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
推荐阅读
- c# - 当我单击 WPF 中的按钮时,如何更改标签的文本?
- c - GetModuleFileNameW 在当前模块上返回 Null
- google-apps-script - Google Docs Apps 脚本查找和替换为斜体
- python - SqlAlchemy:如果可能,强制转换为 int/测试字符串是否为数字
- javascript - 如何让 php 页面从 html 页面接收 ajax 帖子
- django - 给布尔字段一个css类
- python - 如何将 int 变量添加到 txt 文件
- android - 使用Android volley将文件上传到服务器的正确方法
- python - 网页抓取编码价格
- pos - 如何将 paystack 安装到我的 laravel 应用程序?