css - 悬停上的 CSS 以影响另一个容器中的元素(引导卡)
问题描述
当我悬停图像时,我正在尝试更改卡体类容器内的标题和文本的颜色......我已经看过许多类似的悬停示例,这些示例影响了使用 + 或 ~ 选择器的其他元素。我的主要问题是因为我要更改的元素在父容器之外,除非我将它们放在同一个容器下,否则我似乎无法让它工作。我将不胜感激有关如何在不使用 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>
解决方案
我的解决方案:
- 从 中删除填充
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>
推荐阅读
- java - 使用从 XSD 自动生成的 java 类构建 gradle 模块时出现编码错误
- c# - 带有德语变音符号的 C# 中的 SpecFlow 功能
- javascript - 避免使用 html 标签制作元素发送消息
- nagios - Nagios XI API 将更改为 Nagios 核心 API
- javascript - 单击该文件夹名称时如何显示特定文件夹中的所有内容?
- sapui5 - 如何为链接类型 QuickViewGroupElement 添加点击事件?
- traefik - Traefik 不会偶尔在 Docker Compose 上将容器添加到后端
- rust - 我如何向编译器解释 T 以返回相同类型的方式实现 Add ?
- php - 为什么这些错误来自 casperjs?
- c++ - 试图擦除向量 C++ 中的所有未定义节点