html - 我怎样才能在一张表现不同的图像中有 2 个悬停？

Question

我的网站上有一张图片，当我将鼠标悬停在它上面时，它会向左 105 像素：

.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s; 
}
.view:hover img{
left: -105px;
}

我想将此“视图”水平分成两段，每个段的工作方式不同，当鼠标悬停在图像的一个段上时，图像向左移动 105px，另一段在另一个方向（右）。我的意思是写这样的东西：

.view img {
position: absolute;
z-index: 0;
transition:left 0.5s;
-webkit-transition:left 0.5s; 
}
.view:hover 25% right img{
left: -105px;

}
.view:hover 25% left img{
    right: 105px;
}

我怎样才能做到这一点？

Answer 1

您可以使用 :before 和 :after 从 css3

标记：

<div>hallo JAPAN</div>

风格：

div{
    position:relative;
    width:100px;
    height:80px;
    background-color:#ccc;
    margin:100px auto;
}

div:before,div:after{
    content:'';
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    opacity:0;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

div:before{
    background-color:red;
    background-image:url(http://www.marcwitteveen.com/wp-content/uploads/2013/01/apple-logo.png);
    background-repeat:no-repeat;
    background-position:center;
}
div:after{
    background-color:red;
    background-image:url(http://mywindows8themes.com/wp-content/uploads/2011/11/windows_8_metro_logo.png);
    background-repeat:no-repeat;
    background-position:center;
}
div:hover:before{
    left:-100%;
}
div:hover:after{
    left:100%;
}
div:hover:before,div:hover:after{
    opacity:1;
}

像这样http://jsfiddle.net/nXdMn/