另一个问题是我无法将图标变成链接,因为如果我在HTML中添加href,则动画不起作用
我真的真的在codin的世界,所以如果我不能很好地解决我的问题,我会道歉…
body { background-color: Black; background-repeat: repeat; background-attatchment: fixed; background-position: center top; background-size: 100% wIDth: 100%;}.følg { position: absolute; top: 90%; left: 25% ; z-index: 1507; wIDth: 50%; Transition: transform .6s ease-in-out;}.følg:hover{ transform: translate3d(0vh,-20.3vh,0vh);}.følg:hover ~.fb{ transform: translate3d(0vh,-23.3vh,0vh);}.følg:hover ~.insta{ transform: translate3d(0vh,0vh);}.følg:hover ~.snap{ transform: translate3d(0vh,0vh);}.faq { image-attatchment: fixed; position: absolute; top: -1%; left: 13% ; z-index: 3; wIDth: 24%; Transition: transform .2s ease-in-out;}.kjøp { image-attatchment: fixed; position: absolute; top: -1%; left: 37% ; z-index: 4; wIDth: 24%; Transition: transform .2s ease-in-out;}.news { image-attatchment: fixed; position: absolute; top: -1%; left: 61% ; z-index: 2; wIDth: 24%; Transition: transform .2s ease-in-out;}.news:hover,.kjøp:hover,.faq:hover{ transform: translate3d(0vh,3vh,0vh);}.baeA { image-attatchment: fixed; position: absolute; top: 0%; left: 59% ; z-index: 1505; wIDth: 4%;}.baeB { image-attatchment: fixed; position: absolute; top: 0%; left: 35% ; z-index: 1504; wIDth: 4%;}.baeC { image-attatchment: fixed; position: absolute; top: 0%; left: 83% ; z-index: 1503; wIDth: 3%;}.baeD { image-attatchment: fixed; position: absolute; top: 0%; left: 12% ; z-index: 1502; wIDth: 3%;}.fb { image-attatchment: fixed; position: absolute; top: 110%; left: 38% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;}.insta { image-attatchment: fixed; position: absolute; top: 110%; left: 46.5% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;}.snap { image-attatchment: fixed; position: absolute; top: 110%; left: 55% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;} <!DOCTYPE HTML><HTML><Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1"><head> <Meta charset="utf-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=0.8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS"> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.12.0/jquery.min.Js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/Js/bootstrap.min.Js"></script> <style> .carousel-inner > .item > img,.carousel-inner > .item > a > img { wIDth: 100%; margin: auto; } function initialiseAxisImages() { var axis = document.getElementByID('axis'); var axisImages = axis.getElementsByTagname('News'); axisImages[0].classList.remove('News'); axisImages[1].classList.remove('move-left'); } window.addEventListener('load',initialiseAxisImages,false); </style></head><body > <img src="http://i.imgur.com/nFv2eoG.png" alt="lime" /> <img src="http://i.imgur.com/n5eovvX.png" alt="lime" /> <img src="http://i.imgur.com/b7iknCb.png" alt="lime" /> <img src="http://i.imgur.com/yJqMvpT.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/Tp9TaNM.png" alt="lime" /> <img src="http://i.imgur.com/iXR7rmq.png" alt="lime" /> <img src="http://i.imgur.com/STWEZOp.png" alt="lime" /> <div ID="myCarousel" data-rIDe="carousel"> <ol > <li data-target="#myCarousel" data-slIDe-to="0" ></li> <li data-target="#myCarousel" data-slIDe-to="1"></li> <li data-target="#myCarousel" data-slIDe-to="2"></li> <li data-target="#myCarousel" data-slIDe-to="3"></li> </ol> <div role="ListBox"> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> </div> <a href="#myCarousel" role="button" data-slIDe="prev"> <span aria-hIDden="true"></span> <span >PrevIoUs</span> </a> <a href="#myCarousel" role="button" data-slIDe="next"> <span aria-hIDden="true"></span> <span >Next</span> </a></div></body></HTML> 做全屏或一切都会混乱,我也不知道如何解决〜叹息
解决方法<body > <img src="http://i.imgur.com/nFv2eoG.png" alt="lime" /> <img src="http://i.imgur.com/n5eovvX.png" alt="lime" /> <img src="http://i.imgur.com/b7iknCb.png" alt="lime" /> <img src="http://i.imgur.com/yJqMvpT.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <img src="http://i.imgur.com/QPQSByR.png" alt="lime" /> <span ID="fblink"><a ID="" href="https://www.facebook.com/"><img src="http://i.imgur.com/Tp9TaNM.png" alt="lime" /> </a></span> <a ID="instalink" href="https://www.instagram.com/?hl=en"><img src="http://i.imgur.com/iXR7rmq.png" alt="lime" /> </a> <a ID="snaplink" href="https://www.snapchat.com/"><img src="http://i.imgur.com/STWEZOp.png" alt="lime" /></a> <div ID="myCarousel" data-rIDe="carousel"> <ol > <li data-target="#myCarousel" data-slIDe-to="0" ></li> <li data-target="#myCarousel" data-slIDe-to="1"></li> <li data-target="#myCarousel" data-slIDe-to="2"></li> <li data-target="#myCarousel" data-slIDe-to="3"></li> </ol> <div role="ListBox"> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> <div > <img src="http://i.imgur.com/WioHdhd.png" alt="Sko" > </div> </div> <a href="#myCarousel" role="button" data-slIDe="prev"> <span aria-hIDden="true"></span> <span >PrevIoUs</span> </a> <a href="#myCarousel" role="button" data-slIDe="next"> <span aria-hIDden="true"></span> <span >Next</span> </a> </div></body>
CSS：
.carousel-inner > .item > img,.carousel-inner > .item > a > img { wIDth: 100%; margin: auto;}body { background-color: Black; background-repeat: repeat; background-attatchment: fixed; background-position: center top; background-size: 100% wIDth: 100%;}.følg { position: absolute; top: 90%; left: 25% ; z-index: 1507; wIDth: 50%; Transition: transform .6s ease-in-out;}.følg:hover{ transform: translate3d(0vh,0vh);}.følg:hover ~#fblink{ transform: translate3d(0vh,0vh);}.baeA { image-attatchment: fixed; position: absolute; top: 0%; left: 59% ; z-index: 1505; wIDth: 4%;}.baeB { image-attatchment: fixed; position: absolute; top: 0%; left: 35% ; z-index: 1504; wIDth: 4%;}.baeC { image-attatchment: fixed; position: absolute; top: 0%; left: 83% ; z-index: 1503; wIDth: 3%;}.baeD { image-attatchment: fixed; position: absolute; top: 0%; left: 12% ; z-index: 1502; wIDth: 3%;}img .fb { image-attatchment: fixed; position: absolute; top: 110%; left: 38% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;}#instalink { image-attatchment: fixed; position: absolute; top: 110%; left: 46.5% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;}#snaplink { image-attatchment: fixed; position: absolute; top: 110%; left: 55% ; z-index: 1509; wIDth: 6%; Transition: transform .8s ease-in-out;}.fb { wIDth: 50px; height 50px;} 你仍然需要做一些编辑.首先,图像不足以作为下抽屉.您将需要为其创建一个div并在其中添加三个图像(fb,insta和snapchat)并将过渡作为一个整体应用于抽屉以及其中的所有结果链接.
如何创建链接显示在上面的代码中.虽然图像链接的格式化和定位并不是最好的,但它应该为您提供一些如何实现它的想法.
希望能帮助到你.
总结以上是内存溢出为你收集整理的html – 当div被悬停时影响重叠元素,动画被反转全部内容，希望文章能够帮你解决html – 当div被悬停时影响重叠元素,动画被反转所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）