Trigger transition of parent when child targeted

Question

I have created a button that eventually will have an onclick event-- when the user hovers over the button a div element pops up with an anchor that says "learn more" (in the example i used a long string to help solidify the issue) The code i designed works as expected with a mouse, however using the keyboard to tab across the elements -- the keyboard will first select the button (good) then will select the anchor (also good) but the anchor will immediately drop out of view since the parent isnt being hovered. This causes additional issues since it will maintain focus on the now hidden element and cause unexpected movements in content.

I have designed a codepen to demonstrate this issue https://codepen.io/honeynutz/pen/bGgXQyx

My code:

.content_box{
display: flex;
height: 125px;
width: 400px;
overflow: hidden;
position: relative;
}

.content_box .graphic{
flex: 0 1 100px;
}

.content_box .content{
display: flex;
height: 100%;
flex-direction: column;
position: relative;
}

.content_box .cover{
display: flex;
position: absolute;
bottom: -40px;
transition: bottom 1s;
  z-index: 1;
  width: 100%;
 box-sizing: border-box;
  background: white;
}

.content_box:hover .cover, .content_box:focus .cover  {
bottom: 0;
transition: bottom 1s;
}

<button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
  <div class = "content"><P>TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE</p> 
    <div class="cover"><a href="www.google.com">LINKLIN KLINKLINK  LINK LINKL INKLINK LINKLINKL INKLINK</a></div> 
   </div>
</button>
  
  <button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
    <div class = "content"><p>TEXTTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE HERE</p> 
    <div class="cover"><a href="www.nbc.com">LINKLINKLI NKLINKLINKLI NKLINKLINKLIN KLINKLINKLINK LINKLINK</a></div> 
   </div>
</button>
    
    <button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
      <div class = "content"><p>TEXTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERET HERE </P>
    <div class="cover"><a href=www.cbs.com>LINKLINKLIN KLINKLINKLINKLINKLINKLINK LINKLINKLINKLINKLI NKLINKLINKLINKLINK</a></div> 
   </div>
</button>
      
      <button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
        <div class = "content"><p>TEXTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERET HERE</p> 
    <div class="cover"><a href="www.cnn.com">LINKLINKLINKLIN KLINKLINKLINKL INKLINKL INKLINKLINKLINKLINK</a></div> 
   </div>
</button>

My guess is there i need to target the anchor to trigger the transition on the .cover parent but im having trouble figuring out the proper way to do that

EDIT: note i need this code to work in IE11 which negates the ability for me to use focus-within

Also I'd say you should aim to have a graceful fallback for IE instead of trying to make cool things work on it. Otherwise you'll probably need browser detection and JS fallbacks — T J, May 04 '21 at 13:25
Funny you say this -- Reading through the standard you are definitely correct, however I have noticed people are increasing adding additional content to buttons like this. I guess the alternative is to aria it to button but I haven experienced any major issues with this type of code in the past (beyond not being able to nest buttons...that being said maybe that is the solution here..make the parent a div and the "cover" element a button). — Alex DiCaprio, May 04 '21 at 13:25
@AlexDiCaprio Is JS code like **focus** and **blur** event on each `a` element, something you can consider or looking for pure CSS solution ? — Lakshya Thakur, May 04 '21 at 13:28
re: your other comment about graceful fallbacks -- that is my eventual plan (if there isnt a good solution). I was hoping there was some type of child selector out there that would trigger the parent somehow. I was trying to avoid JS just to keep it all clean but that might also end up being the solution if i want to keep the same look and feel — Alex DiCaprio, May 04 '21 at 13:28
@LakshyaThakur -- I was hoping to keep this fully CSS which may be a pipedream. But to your point, yes it is a possibility that i was looking into, just hate to call js just for IE11 — Alex DiCaprio, May 04 '21 at 13:30

Lakshya Thakur · Accepted Answer · 2021-05-05T12:58:00.190

Not sure if CSS can solve it for you this way but yeah below is a sample JS code that might work :-

var anchors = document.querySelectorAll('.anchorLink');

function focusParent(event) {
  var parent = event.target.parentNode;
  parent.classList.add('coverAnimation');
}

function blurParent (event) {
  var parent = event.target.parentNode;
  parent.classList.remove('coverAnimation');
}

for(var index = 0;index<anchors.length;index++){
  var anchor = anchors[index];
  anchor.addEventListener('focus', focusParent)
  anchor.addEventListener('blur', blurParent)
}

.content_box {
  display: flex;
  height: 125px;
  width: 400px;
  overflow: hidden;
  position: relative;
}

.content_box .graphic {
  flex: 0 1 100px;
}

.content_box .content {
  display: flex;
  height: 100%;
  flex-direction: column;
  position: relative;
}

.content_box .cover {
  display: flex;
  position: absolute;
  bottom: -40px;
  transition: bottom 1s;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  background: white;
}

.content_box:hover .cover,
.content_box:focus .cover {
  bottom: 0;
  transition: bottom 1s;
}

.coverAnimation {
  bottom: 0 !important;
  transition: bottom 1s !important;
}

<button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
  <div class = "content"><P>TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE</p> 
    <div class="cover"><a class='anchorLink' href="www.google.com">LINKLIN KLINKLINK  LINK LINKL INKLINK LINKLINKL INKLINK</a></div> 
   </div>
</button>

<button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
    <div class = "content"><p>TEXTTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE HERE</p> 
    <div class="cover"><a 
 class='anchorLink'                          href="www.nbc.com">LINKLINKLI NKLINKLINKLI NKLINKLINKLIN KLINKLINKLINK LINKLINK</a></div> 
   </div>
</button>

<button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
      <div class = "content"><p>TEXTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERET HERE </P>
    <div class="cover"><a 
 class='anchorLink'                          href=www.cbs.com>LINKLINKLIN KLINKLINKLINKLINKLINKLINK LINKLINKLINKLINKLI NKLINKLINKLINKLINK</a></div> 
   </div>
</button>

<button type="button" class="content_box">
  <div class ="graphic">IMAGE</div> 
        <div class = "content"><p>TEXTEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERET HERE</p> 
    <div class="cover"><a 
 class='anchorLink'                          href="www.cnn.com">LINKLINKLINKLIN KLINKLINKLINKL INKLINKL INKLINKLINKLINKLINK</a></div> 
   </div>
</button>

Thank you I will give this a shot and set this as an answer if it works. My restrictions are more on my end than on the solution end... — Alex DiCaprio, May 04 '21 at 13:39
Cool @AlexDiCaprio. If you come up with something better, do post the same as an answer. Might be useful to someone else. — Lakshya Thakur, May 04 '21 at 13:43
I believe the const variable is not allowed within IE11 (or at least partially) -- i attempted to change to var but it also errored out. Sorry I am not a pro at JS so I am not exactly sure whats erroring out here the console is of course not useful in indicating the problem — Alex DiCaprio, May 04 '21 at 14:46
@AlexDiCaprio I updated my code snippet. Could be due to arrow functions being used. Replaced them with regular functions. Also changed from .forEach to oldskool for loop — Lakshya Thakur, May 04 '21 at 14:54
Thank you!! I have marked this as correct -- one minor adjustment was that i needed to change the other constants to vars -- but it worked...marking at answered! — Alex DiCaprio, May 04 '21 at 15:15

Trigger transition of parent when child targeted

1 Answers1