时间戳

首页 > 解决方案 > 如何让图标和文字在悬停时同时改变颜色？

html - 如何让图标和文字在悬停时同时改变颜色？

问题描述

我有divs每个包含一个<i>和一个<p>。悬停时，我希望两者同时改变颜色。检查论坛上的一些答案，我设法，但是在悬停时，另一个divs全部变成白色。（我正在使用 Bootstrap 4）。

.category-box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 3px 11px rgba(170, 192, 205, 0.49);
  padding: 20px 0;
  margin-bottom: 20px;
}

.category-box p {
  color: #1F2833;
  font-size: 1.1em;
}

.category-box:hover {
  background-color: #0074e1;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: white;
}

.category-box-container i {
  color: #0074e1;
}

.category-box-container:hover p,
.category-box-container:hover i {
  color: white;
  text-decoration: none;
}

.category-box i {
  font-size: 1.7em;
  margin-bottom: 10px;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Fontawsome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<div class="col-lg-9 col-md-12 col-sm-12 col-12 mx-auto category-box-container">
  <div class="row">
    <!-- Sobre Paygol -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-user-tie"></i>
        <p>Sobre Paygol</p>
      </div>
    </a>

    <!-- Vendedores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-hand-holding-usd"></i>
        <p>Vendedores</p>
      </div>
    </a>

    <!-- Compradores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-shopping-cart"></i>
        <p>Compradores</p>
      </div>
    </a>

    <!-- Países -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-globe-americas"></i>
        <p>Países</p>
      </div>
    </a>

    <!-- Desarrolladores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-laptop-code"></i>
        <p>Desarrolladores</p>
      </div>
    </a>

    <!-- Términos -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-file-alt"></i>
        <p>Términos</p>
      </div>
    </a>
    <!-- /Términos -->
  </div>
</div>

标签： htmlcssbootstrap-4

解决方案

您需要删除:hover影响整个容器/父级的。注释中的代码更改。

.category-box {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 3px 11px rgba(170, 192, 205, 0.49);
  padding: 20px 0;
  margin-bottom: 20px;
}

.category-box p {
  color: #1F2833;
  font-size: 1.1em;
}

.category-box:hover {
  background-color: #0074e1;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: white;
}

.category-box-container i {
  color: #0074e1;
}

.category-box:hover p, 
.category-box:hover i { /* Renamed from `.category-box-container` */
  color: white;
  text-decoration: none;
}

.category-box i {
  font-size: 1.7em;
  margin-bottom: 10px;
}
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Fontawsome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

<div class="col-lg-9 col-md-12 col-sm-12 col-12 mx-auto category-box-container">
  <div class="row">
    <!-- Sobre Paygol -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-user-tie"></i>
        <p>Sobre Paygol</p>
      </div>
    </a>

    <!-- Vendedores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-hand-holding-usd"></i>
        <p>Vendedores</p>
      </div>
    </a>

    <!-- Compradores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-shopping-cart"></i>
        <p>Compradores</p>
      </div>
    </a>

    <!-- Países -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-globe-americas"></i>
        <p>Países</p>
      </div>
    </a>

    <!-- Desarrolladores -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-laptop-code"></i>
        <p>Desarrolladores</p>
      </div>
    </a>

    <!-- Términos -->
    <a href="#" class="col-lg-4 col-md-6 col-sm-12 col-12 text-center">
      <div class="col category-box">
        <i class="fas fa-file-alt"></i>
        <p>Términos</p>
      </div>
    </a>
    <!-- /Términos -->
  </div>
</div>

推荐阅读