html – 悬停时两个div的转换

概述好的,所以我几乎想出了这个,但我被困在最后一点..这是我的代码： /* valuecanvas */#wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; background: url(http://i67.tinypic.com/30ayjhg.jp 好的,所以我几乎想出了这个,但我被困在最后一点..这是我的代码：

/* 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;  @R_301_6818@-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,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,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);}/* 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,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);}#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,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);}/* 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,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,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);}#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);}

<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

如果你徘徊在“收益”上,过渡也适用于“增益创造者”.但由于某种原因,它不起作用反过来..我认为它可能是一种单向的事情所以我试图让出#gain2：悬停〜#gainscreaters2但也没有成功.

我错过了什么吗？

解决方法 您无法使用CSS选择前面的元素.相反,将它们放在另一个带有ID的ul中

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,-webkit-transform 2s; /* Safari */    Transition: wIDth 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,transform 2s;}

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

总结

以上是内存溢出为你收集整理的html – 悬停时两个div的转换全部内容，希望文章能够帮你解决html – 悬停时两个div的转换所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。