Question

我在我的网站上有一张图片，当我将鼠标移到它上面时，这将留下105px：

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

我想将这个“视图”水平划分为两个区段，每个区段的工作方式不同，当鼠标悬停在图像的一个区段上，然后图像在105px中向左移动而另一个区段在另一个方向上进行（右侧）.i表示写入像这样的东西：

.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

标记：

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

我怎么能在一张表现不同的图像中悬停？

1 个答案: