好的,所以我几乎想出了这个,但我坚持到最后一点..这是我的代码:
/* valuecanvas */
#wrappercs {
margin-top: 3px;
width: auto;
height: auto;
display: block;
float: right;
background: url(http://i67.tinypic.com/30ayjhg.jpg);
border: 2px solid;
}
#valuecanvas2 {
width: 640px;
height: 297px;
background: url(http://i65.tinypic.com/2kfu6f.jpg);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
padding: 0px;
}
#valuecanvas2 li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#valuecanvass2 li,
#valuecanvas2 a {
height: 200px;
display: block;
}
/* Gains + gainscreaters */
#gains2 {
background: url(http://i64.tinypic.com/j73t55.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gains2:hover {
background: url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
#gains2:hover ~ #gainscreaters2 {
background: url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
-ms-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
#gainscreaters2 {
background: url(http://i67.tinypic.com/imqgx4.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gainscreaters2:hover {
background: url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(20px, -15px);
-moz-transform: translate(20px, -15px);
-o-transform: translate(20px, -15px);
-ms-transform: translate(20px, -15px);
transform: translate(20px, -15px);
}
#gainscreaters2:hover ~ #gains2 {
background: url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
/* jobs + services */
#jobs2 {
background: url(../customerpains/jobs.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#jobs2:hover {
background: url(../customerpains/jobskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transform: translate(15px, 0px);
-moz-transform: translate(15px, 0px);
-o-transform: translate(15px, 0px);
-ms-transform: translate(15px, 0px);
transform: translate(15px, 0px);
}
#services2:hover ~ #jobs2 {
background: url(../customerpains/jobskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transform: translate(15px, 0px);
-moz-transform: translate(15px, 0px);
-o-transform: translate(15px, 0px);
-ms-transform: translate(15px, 0px);
transform: translate(15px, 0px);
}
#jobs2:hover ~ #services2 {
background: url(images/serviceskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transform: translate(-20px, 0px);
-moz-transform: translate(-20px, 0px);
-o-transform: translate(-20px, 0px);
-ms-transform: translate(-20px, 0px);
transform: translate(-20px, 0px);
}
#services2 {
background: url(images/services.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#services2:hover {
background: url(images/serviceskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transform: translate(-20px, 0px);
-moz-transform: translate(-20px, 0px);
-o-transform: translate(-20px, 0px);
-ms-transform: translate(-20px, 0px);
transform: translate(-20px, 0px);
}
/* pains + painreleavers */
#pains2 {
background: url(../customerpains/pains.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 339px;
top: 151px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#pains2:hover {
background: url(../customerpains/painskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 151px !important;
-webkit-transform: translate(-10px, 15px);
-moz-transform: translate(-10pxpx, 15px);
-o-transform: translate(-10px, 15px);
-ms-transform: translate(-10px, 15px);
transform: translate(-10px, 15px);
}
#pains2:hover ~ #painreleavers2 {
background: url(images/painreleaverskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transform: translate(20px, 20px);
-moz-transform: translate(20px, 20px);
-o-transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
#painreleavers2 {
background: url(images/painreleavers.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#painreleavers2:hover {
background: url(images/painreleaverskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transform: translate(20px, 20px);
-moz-transform: translate(20px, 20px);
-o-transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
#painreleavers2:hover ~ #pains2 {
background: url(../customerpains/painskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 151px !important;
-webkit-transform: translate(-10px, 15px);
-moz-transform: translate(-10pxpx, 15px);
-o-transform: translate(-10px, 15px);
-ms-transform: translate(-10px, 15px);
transform: translate(-10px, 15px);
}
<div id="wrappercs">
<ul id="valuecanvas2">
<li id="gains2"></li>
<li id="jobs2" ></li>
<li id="pains2" ></li>
<li id="gainscreaters2"></li>
<li id="services2"></li>
<li id="painreleavers2"></li>
</ul>
</div>
这是我的jsfiddle
如果你徘徊在“收益”上,那么过渡也适用于“增益创造者”。但由于某种原因,它不起作用..我认为它可能是单向的,所以我试图放出#gains2:hover ~ #gainscreaters2
,但也没有成功。
答案 0 :(得分:6)
您无法使用CSS选择前面的元素。相反,将它们放在另一个ul中,其ID为
HTML:
<div id="wrappercs">
<ul id="valuecanvas2">
<li>
<ul id="gainsAnimation">
<li id="gains2"></li>
<li id="gainscreaters2"></li>
</ul>
</li>
<li id="jobs2" ></li>
<li id="pains2" ></li>
<li id="services2"></li>
<li id="painreleavers2"></li>
</ul>
</div>
CSS:
/* Gains + gainscreaters */
#gains2 {
background:url(http://i64.tinypic.com/j73t55.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gainsAnimation:hover #gains2 {
background:url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
#gainsAnimation:hover #gainscreaters2{
background:url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
-ms-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
#gainscreaters2 {
background: url(http://i67.tinypic.com/imqgx4.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}