在尝试描述它时，我认为最简单的方法是简单地显示代码。
<div class="cdm-animated-card">
<div class="cardTitle">
<h5 class="cardHeader">Collection Title</h5>
</div>
<img class="cardImage" src="collection/thumbnail.jpg" alt="alt text">
<div class="cardDescriptionDiv">
<div class="cardDescriptionText">
<a class="cardLink" href="link/to/collection">this is my clickable description</a>
</div>
</div>
</div>
障碍 1：让描述div 在悬停时"淡入"。这是我的CSS，减去标题和其他不相关部分的一些东西。
.cardsWrapper {
display: flex;
flex-wrap: wrap;
margin: 0px 10px 10px 10px;
justify-content: center;
}
.cdm-animated-card {
position: relative;
display: flex;
overflow: hidden;
/*other css*/
}
.cardDescriptionText a {
text-decoration: none;
color: #E6AA3C;
font-weight: 400;
padding: 5px;
font-size: 18px;
}
.cdm-animated-card .cardDescriptionDiv {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.cdm-animated-card .cardDescriptionText {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cdm-animated-card:hover .cardDescriptionDiv, .cdm-animated-card.active .cardDescriptionDiv {
opacity: 1;
}
现在，当我将鼠标悬停在这些卡片上时，描述div 会淡入。一切看起来都居中。一切都很好..但是当我从页面中更高的元素开始跳跃时，我可以看到[如果我已经将鼠标悬停在卡片上]，描述文本周围有蓝色的小边框。
问题是...
当我按 Tab 键转到锚点时 [并且我还没有悬停]动画永远不会发生，基本上，如果我无法使用鼠标，我将永远无法看到描述。
我试过了
.cdm-animated-card .cardLink:focus, .cdm-animated-card .cardDescriptionDiv:focus, .cdm-animated-card, .cardDescriptionText:focus {
opacity: 1;
}
基本上是飞镖法...并且还尝试过
.cdm-animated-card:focus .cardDescriptionDiv {
opacity: 1;
}
因为据我了解，当你按 tab 键到一个元素时，它现在是"聚焦的"，我试图说，"当描述通过制表符聚焦时，将.cardDescriptionDiv元素的不透明度更改为 1，以便我可以看到它。
TLDR：当按 Tab 键到孩子时，我希望它的父级改变不透明度。
--face palm--
我错过了".parent：focus-within"伪类。
.cardDescriptionDiv:focus-within {
opacity: 1;
}