過渡 - 優文庫

行，所以我幾乎想通這一個，但我被困在最後一位。這裏是我的代碼：過渡

/* 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，但沒有成功。

我錯過了什麼？

來源

2016-01-27 maxpol

'gainscreaters2'是在gains2'後'標記。你不能用css遍歷DOM樹。 – Guy

它適用於我，但背景圖像將不會轉換背景顏色或位置可以因爲值可以分爲... –

您不能使用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; 
}

小提琴：https://jsfiddle.net/tjjc4vxo/1/

來源

2016-01-27 14:45:34

作品像一個魅力，感謝一堆！ – maxpol

過渡

回答

相關問題