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

Answer 1

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>