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;
}

我想将这个“ View ”水平划分为 2 个部分，每个部分的工作方式不同，当鼠标悬停在图像的一个部分上时，图像在 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

你可以在 css3 中使用 :before 和 :after

标记:

<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/