当 child 成为目标时触发 parent 的转换

Question

我创建了一个最终会产生 onclick 事件的按钮——当用户将鼠标悬停在该按钮上时，会弹出一个 div 元素，其中包含一个显示“了解更多”的锚点（在我使用的示例中一个长字符串来帮助解决问题）我设计的代码可以使用鼠标按预期工作，但是使用键盘在元素之间切换 - 键盘将首先 select 按钮（好）然后 select 锚点（也很好）但是锚点会立即从视图中消失，因为 parent 没有被悬停。这会导致其他问题，因为它将继续关注现在隐藏的元素并导致内容意外移动。

我设计了一个codepen来演示这个问题https://codepen.io/honeynutz/pen/bGgXQyx

我的代码：

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

我猜我需要定位锚点以触发 .cover 上的过渡 parent 但我无法找出正确的方法来做到这一点

编辑：注意我需要这段代码才能在 IE11 中工作，这否定了我使用 focus-within

的能力

Answer 1

不确定 CSS 是否可以通过这种方式为您解决问题，但是是的，下面是一个可能有效的示例 JS 代码:-

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>

当 child 成为目标时触发 parent 的转换

Trigger transition of parent when child targeted

html

css

css-transitions

anchor

accessible