在前端开发的过程中,有时候需要实现这样的效果:
当鼠标悬停或点击container的时候,显示close,否则隐藏close。
这种效果可以使用js来实现,监听container的mouseover和click事件,触发时显示close,监听mouseleave事件,触发时隐藏close。
但是,这种实现方式对触摸屏不友好,为了让触摸屏上也有类似的效果,可以使用focus事件。
div默认是不支持focus事件的,所以需要在container上加上tabindex="-1",属性:
并写上样式:
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;}