我创建了一个按钮,最终会有一个 onclick 事件——当用户将鼠标悬停在按钮上时,一个 div 元素会弹出一个带有“了解更多”的锚点(在示例中,我使用了一个长字符串来帮助巩固问题)我设计的代码可以使用鼠标按预期工作,但是使用键盘在元素之间进行选项卡 - 键盘将首先选择按钮(好)然后选择锚(也好)但锚会立即退出视图因为父母没有被悬停。这会导致其他问题,因为它将保持对现在隐藏的元素的关注并导致内容发生意外移动。
我设计了一个 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 父级上的转换,但我无法找出正确的方法来做到这一点
编辑:请注意,我需要此代码才能在 IE11 中工作,这否定了我使用 focus-within 的能力