css - 单击IE中的链接时，用:focus选择的div消失了

给定两个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唯一的解决方法？谢谢

最佳答案

我猜唯一的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;
}