CODEWITHSUNDEEP
javascriptcsscss-selectorscss-transformstabindex
James B
James B

Reputation: 452

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

While trying to describe it, I think it would be easiest to simply show the code. 

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

Obstacle 1: Get the description div to "fade in" on hover. Here's my CSS for that, minus some stuff for the header and other non-relevant parts. 

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

Now when I hover over these cards, the description div fades in. Everything looks centered.. all is well.. but when I tab from elements higher up in the page, I can see [if I'm already hovering over a card], the description text gets that little blue border around it.

Problem is...
When I tab to the anchor [and I'm not already hovering] the animation never happens and basically, if I was unable to use a mouse, I'd never be able to see the description.

I've tried 

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

basically the darts method... and also tried

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

Because from what I understand, when you tab to an element, it is now "focused," I tried to say, 'when the description is focused via tab, change the opacity of the .cardDescriptionDiv element to 1 so that I can see it.'

tldr: when tabbing to a child, I would like its parent to change opacity.

Upvotes: 0

Views: 267

Answers (1)

James B
James B

Reputation: 452

--face palm--

I missed the ".parent:focus-within" pseudo-class. 

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

Fixed

Upvotes: 2

Related Questions