div容器里子元素的显示和隐藏控制

在前端开发的过程中，有时候需要实现这样的效果：

<div class="container">
<div class="close"></div>
</div>

当鼠标悬停或点击container的时候，显示close，否则隐藏close。

这种效果可以使用js来实现，监听container的mouseover和click事件，触发时显示close，监听mouseleave事件，触发时隐藏close。

但是，这种实现方式对触摸屏不友好，为了让触摸屏上也有类似的效果，可以使用focus事件。

div默认是不支持focus事件的，所以需要在container上加上tabindex="-1",属性：

<div class="container" tabindex="-1">
<div class="close"></div>
</div>

并写上样式：

div.container:focus div.close,div.container:hover div.close{
display:block;
}

这样当div获得焦点或者鼠标悬停时，close就会显示出来。

然而，在ie浏览器（已知有wp8 的ie）下，即使加上了tabindex属性，div也无法直接获得焦点，所以需要js来监听click事件，来手动触发focus事件：

$("div.container").click(
function(){
$(this).focus();
}
});

某些情况下，还可以给需要显示的元素加上hover和focus的css样式。

对于360安全浏览器极速模式，可以使用以下样式去除默认的焦点样式：

div[tabindex]:focus{
outline:none;
}