Question

当我将鼠标悬停在图像上时，我试图更改 card-body类容器内的标题和文本的颜色... 我已经看过许多类似的示例，它们悬停影响使用+或〜选择器的其他元素。我的主要问题是因为我要更改的元素在父容器之外，除非将它们放在同一容器中，否则我似乎无法使其正常工作。对于不使用JavaScript如何实现此目的的技巧，我将不胜感激。

.card-header {
  position: relative;
  overflow: hidden;
} 

.card img {
  object-fit: cover;
  transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card img:hover {
  transform:scale(1.1);
}

.card-header img:hover + .card-body h5{
  color:var(--secondary-color);
}

/* I am stuck here */
.card-header img:hover + .card-body h5{
  color:purple;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card text-center mb-5 mb-sm-5">
  <div class="card-header">
  <img class="img-fluid" src="https://source.unsplash.com/collection/190727/1600x900" >
  </div>
  <div class="card-body">
    <h5 class="card-title font-weight-bold">Title</h5>
    <p class="lead">Description</p>
  </div>
</div>

Answer 1

我的解决方案：

从card-header删除填充，然后将其重新应用于img。现在，如果您将鼠标悬停在card-header的任何部分上，那么您还将鼠标悬停在img
应用CSS中相邻的同级兄弟card-header

.card-header {
  position: relative;
  overflow: hidden;
} 

.card img {
  object-fit: cover;
  transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card img:hover {
  transform:scale(1.1);
}

.card-header img:hover + .card-body h5{
  color:var(--secondary-color);
}

/* I am stuck here */
.card-header img:hover + .card-body h5{
  color:purple;
}

.card-header {
  padding: 0 !important;
}

.card-header img {
  padding: .75rem 1.25rem;
}

.card-header:hover + .card-body .card-title,
.card-header:hover + .card-body .lead {
  color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card text-center mb-5 mb-sm-5">
  <div class="card-header">
  <img class="img-fluid" src="https://source.unsplash.com/collection/190727/1600x900" >
  </div>
  <div class="card-body">
    <h5 class="card-title font-weight-bold">Title</h5>
    <p class="lead">Description</p>
  </div>
</div>

Answer 2

"+"选择器选择所选元素之后的元素。您的选择器应达到以下目的：

.card-header:hover + .card-body h5

在纯CSS中无法使用用于在图像上悬停和更改h5样式的选择器。

这是优化的代码：

.card-header {
  position: relative;
  overflow: hidden;
} 

.card img {
  object-fit: cover;
  transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card img:hover {
  transform:scale(1.1);
}

.card-header img:hover + .card-body h5{
  color:var(--secondary-color);
}

/* I am stuck here */
.card-header:hover + .card-body h5{
  color:purple;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="card text-center mb-5 mb-sm-5">
  <div class="card-header">
  <img class="img-fluid" src="https://source.unsplash.com/collection/190727/1600x900" >
  </div>
  <div class="card-body">
    <h5 class="card-title font-weight-bold">Title</h5>
    <p class="lead">Description</p>
  </div>
</div>

悬停上的CSS会影响另一个容器（引导卡）中的元素

2 个答案: