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

Posted 2023-03-06

【中文标题】悬停上的 CSS 以影响另一个容器中的元素（引导卡）

【英文标题】：CSS on Hover to affect elements in another container (bootstrap card)

【发布时间】：2019-07-27 15:06:45

【问题描述】：

当我悬停图像时，我正在尝试更改 card-body 类 容器内 title 和 text 的颜色... 我已经看过许多类似的悬停示例，这些示例影响了使用 + 或 ~ 选择器的其他元素。我的主要问题是因为我要更改的元素在父容器之外，除非我将它们放在同一个容器下，否则我似乎无法让它工作。我将不胜感激有关如何在不使用 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>

【参考方案1】：

我的解决方案：

从card-header 中删除填充并将其重新应用到img。现在，如果您将鼠标悬停在card-header 的任何部分，您也将鼠标悬停在img 从card-header 应用相邻的兄弟CSS

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

【讨论】：

感谢您提供的绝妙技巧和解决方案！这些填充值是来自引导程序还是您自己编造的？

@YongJunJung 这些填充数字来自 Bootstrap。我通过查看浏览器开发工具中的代码示例找到了它们。

【参考方案2】：

"+"-selector 选择被选元素之后的元素。您的选择器应该是为了实现这一点：

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

【讨论】：

但这会改变文本颜色，即使img 没有直接悬停（例如图像周围的边缘）。

感谢您的尝试！我知道对“+”选择器有更好的理解。