Html
    Css
    Js

    
                        
 .user_wns_wrjj990 {
	width:1000px;
	height:auto;
	overflow:hidden;
	cursor:pointer;
}
.user_wns_wrjj990 [fox=con] {
	width:calc((990px - 10px * 3) / 4);
	background:url(http://img14.360buyimg.com/cms/jfs/t2440/158/2211029431/63092/8a132fbf/56f8e700N59df203e.jpg) -616px 0 no-repeat;
	height:calc((990px - 10px * 3) / 4 / 3 * 4);
	position:relative;
	overflow:hidden;
	margin:10px 10px 0 0;
	float:left;
}
.user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n-1) {
	width:240px;
	height:240px;
	transform:rotate(45deg) skew(8deg,8deg);
	position:absolute;
	left:2px;
}
.user_wns_wrjj990 [fox=con] [fox$=_c]:nth-of-type(2n) {
	width:240px;
	height:240px;
	transform:rotate(45deg) skew(8deg,8deg);
	position:absolute;
	top:42px;
}
.user_wns_wrjj990 [fox^=top] {
	top:-151px;
}
.user_wns_wrjj990 [fox^=right] {
	left:148px;
}
.user_wns_wrjj990 [fox^=bottom] {
	bottom:-151px;
}
.user_wns_wrjj990 [fox^=left] {
	right:147px;
}
.user_wns_wrjj990 [fox=con]:hover [fox$=_c] {
	transform:none;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.user_wns_wrjj990 [fox=con] [fox$=_c]:hover {
	z-index:5;
}
.user_wns_wrjj990 [fox$=_c] [fox$=_con] {
	display:block;
	width:calc((990px - 10px * 3) / 4);
	height:calc((990px - 10px * 3) / 4 / 3 * 4);
	background-image:linear-gradient(0deg,#000,#000,#000);
	opacity:0.5;
}
.user_wns_wrjj990 [fox^=top] [fox$=_con] {
	transform:translateY(-100%);
}
.user_wns_wrjj990 [fox^=bottom] [fox$=_con] {
	transform:translateY(100%);
}
.user_wns_wrjj990 [fox^=left] [fox$=_con] {
	transform:translateX(-100%);
}
.user_wns_wrjj990 [fox^=right] [fox$=_con] {
	transform:translateX(100%);
}
.user_wns_wrjj990 [fox$=_c]:hover [fox$=_con] {
	transform:translateY(0);
	transition:all .3s linear;
	transform:translateX(0);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css判断鼠标进入方向

1
      惘然追忆ing0
      2017/6/26 13:06:23
      这个可以,不错,各个方向都有效果 回复