用户悬停搜索输入时如何更改搜索图标的颜色？

时间：2018-11-23 22:49:31

标签： html css

您知道用户悬停搜索输入时如何将搜索图标的颜色从灰色更改为黑色吗？使用下面的代码，当用户将鼠标悬停在搜索图标上时，搜索图标只会将颜色从灰色变为黑色，而在用户悬停搜索输入时则不会。

示例：https://jsfiddle.net/83vnj5ru/8/

HTML：

.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 {
  border: 2px solid gray;
  border-radius: 4px;
}

.search-icon {
  background-color: #ffffff !important;
  border: 1px solid white !important;
}

.search-input {
  border: 2px solid white !important;
}

.search-input::-webkit-input-placeholder {
  color: gray !important;
}

.search-input::-webkit-input-placeholder {
  color: gray;
}

.search-input::-moz-placeholder {
  color: gray;
}

.search-input::-ms-input-placeholder {
  color: gray;
}

.search:hover {
  border: 2px solid black;
}

.dropdown-toggle::after {
  display: none;
  color: gray;
}

.search-input:hover::-webkit-input-placeholder {
  color: black !important;
}

.search-input:hover:-moz-placeholder {
  color: black;
}

.search-input:hover::-moz-placeholder {
  color: black;
}

.search-input:hover:-ms-input-placeholder {
  color: black;
}

.dropdown-toggle:hover {
  color: black !important;
  cursor: pointer;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<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 search">
                    <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>

2 个答案:

答案 0 :(得分：1)

您可以将父类div与类search一起使用，将其悬停时，请更改图标的颜色：

.input-group.search:hover .fa-search {
    color: black;
}

Here's更新的小提琴

答案 1 :(得分：1)

将.search:hover悬停在.search上可以更改子元素。在这种情况下，它将是：

.search:hover .input-group-text {
    color: black;
}


.form-group {
  margin-bottom: 0 !important;
}

.input-group-text {
  color: gray;
}

.input-group-text:hover {
  color: black;
}

.search:hover .input-group-text {
  color: black;
}

.filters {
  display: inline-block;
  color: gray;
  font-weight: bold;
}

.filters i{
  font-size: 1.1rem;
  color: gray;
  font-weight: bold;
}

.search{
  border:2px solid gray;
  border-radius: 4px;
}

.search-icon {
  background-color: #ffffff !important;
  border: 1px solid white !important;
}

.search-input {
  border: 2px solid white !important;
}

.search-input::-webkit-input-placeholder{
  color: gray !important;
}

.search-input::-webkit-input-placeholder {
  color: gray;
}

.search-input::-moz-placeholder {
  color: gray;
}

.search-input::-ms-input-placeholder {
  color: gray;
}



.search:hover{
  border: 2px solid black;
}

.dropdown-toggle::after {
  display: none;
  color: gray;
}

.search:hover .search-input::-webkit-input-placeholder{
  color: black !important;
}

.search:hover .search-input:-moz-placeholder {
  color: black;
}

.search:hover .search-input::-moz-placeholder {
  color: black;
}

.search:hover .search-input:-ms-input-placeholder {
  color: black;
}


.dropdown-toggle:hover{
  color:black !important;
  cursor: pointer;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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 search">
                    <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>

相关问题
最新问题