用css怎么做出这样的效果？？

Question

用css做这个效果，鼠标放上去会出现如图所示的效果，我知道用css伪类标签来做，但是不知道代码该怎么写，请教！

Answer 1

这个啊，默认的时候就是展开的样式，
只是把图片作者信息等先display:none；
等你这个a:hover的时候display:blcok就好;
简单说就是默认的时候层里面也是有序号，图片，标题，作者的信息，默认隐藏
只是经过的时候显示出来而已。

Answer 2

你需要学会 使用 F12 ~~~~=
右键或者右上角的某个小图标 -> Force Element state -> :hover ， 自己看属性 ~~
li:hover {}
li:hover span {}
li:hover b {}

======
就是 hover 下， 用js或者css改变 各种属性~~

Answer 3

a:hover::after {       
content: "";      
display: block;      
position: absolute;      
top: -15%%;      
left: -14%;      
width: 120%;      
height: 120%;      
border-style: solid;      
border-width: 4px;      
border-color: #DDD;   
}

用jquery的话
$("p").hover(function(){
$("p").css("background-color","yellow");
$("p").html("");
},function(){
$("p").css("background-color","pink");
$("p").html("");
});