如何在焦点上激活 parent 动画（tab 移至）child

Question

在尝试描述它时，我认为简单地显示代码是最简单的。

<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 至 "fade in"。这是我的 CSS，减去了 header 和其他 non-relevant 部分的一些内容。

.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 淡入。一切看起来都居中..一切都很好..但是当我从页面上部的元素切换时，我可以看到 [if我已经将鼠标悬停在一张卡片上]，描述文本周围有蓝色的小边框。

问题是...
当我切换到锚点时 [我还没有悬停] 动画永远不会发生，基本上，如果我不能使用鼠标，我将永远无法看到描述。

我试过了

.cdm-animated-card .cardLink:focus, .cdm-animated-card .cardDescriptionDiv:focus, .cdm-animated-card, .cardDescriptionText:focus {
  opacity: 1;
}

基本上是飞镖法...也试过

.cdm-animated-card:focus .cardDescriptionDiv {
  opacity: 1;
}

因为据我了解，当您切换到一个元素时，它现在是 "focused," 我试着说，'when the description is focused via tab, change the opacity of the .cardDescriptionDiv element to 1 so that I can see it.'

tldr：当切换到 child 时，我希望它的 parent 改变不透明度。

Answer 1

--脸掌--

我错过了“.parent:focus-within”伪class。

.cardDescriptionDiv:focus-within {
  opacity: 1;
}

如何在焦点上激活 parent 动画（tab 移至）child

How to activate parent animation on focus (tab over to) child

javascript

css

css-selectors

tabindex

css-transforms

固定