以孩子为目标时触发父母的转换

问题描述

我创建了一个最终会有一个 onclick 事件的按钮——当用户将鼠标悬停在按钮上时，一个 div 元素会弹出一个带有“了解更多”的锚点（在这个例子中，我使用了一个长字符串来帮助巩固问题）我设计的代码可以用鼠标按预期工作，但是使用键盘在元素之间切换 - 键盘将首先选择按钮（好）然后选择锚（也好）但锚会立即下降由于未悬停父级，因此不在视野范围内。这会导致其他问题，因为它会将注意力集中在现在隐藏的元素上，并导致内容出现意外移动。

我设计了一个代码笔来演示这个问题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 父级上的转换，但我无法找出正确的方法来做到这一点

编辑：请注意，我需要此代码才能在 IE11 中工作，这使我无法使用焦点内

解决方法

不确定 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>