div选择：当单击IE中的链接时焦点消失

Question

鉴于两个div box1和box2，我尝试使用box2选择器点击box1来显示focus。

内部box2是一个简单的超链接，点击时box2消失。这是预期的，因为点击box2取消选择box1，因此不再关注。但是，在Firefox 31和Chrome 37中，浏览器仍会根据需要将我带到链接的网页，但IE 11什么都不做。

这是一个简单的jsfiddle：http://jsfiddle.net/ndwurxg2/

单击红色框将显示灰色框，然后单击链接“Google”将带您到那里（我假设jsfiddle只是重定向到它自己的页面，但你可以看到它正在加载），而IE没有。

有没有css只能解决这个问题？感谢

Answer 1

我猜唯一的CSS解决方案是将鼠标悬停在元素上时将visibility更改为visible。我不确定这是否适合您的行为，但它现在可以在IE中使用。

Updated Example

#box1:focus ~ #box2,
#box2:hover,
#box2:active {
    visibility: visible;
}

或者，您也可以使用以下内容：

Updated Example

#box1:focus ~ #box2,
#box2:focus,
#box2:active {
    visibility: visible;
}
#box2 a:active {
    visibility: visible;
    opacity: 0;
}