ホバー時にアイコンとテキストの色を同時に変更するにはどうすればよいですか？

debugcn 投稿 Dev

ポーラ

私が持っている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>

m4n0

: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>