4
当facebook，snapchat和instagram图标悬停时，我遇到了“FølgOss”悬停动画被颠倒的问题。 我不希望发生这种情况。我只是希望它通常回滚，当你没有徘徊时.følg当div被徘徊时影响重叠元素动画被颠倒
另一个问题是我无法将图标变成链接，因为动画无法正常工作，如果我在html中添加href你应该对图像
我真的真的打号的世界，所以我道歉，如果我不是在制订我的问题不够好......
body {
background-color: Black;
\t background-repeat: repeat;
\t background-attatchment: fixed;
\t background-position: center top;
\t background-size: 100%
\t 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, -23.3vh, 0vh);
}
.følg:hover ~.snap{
transform: translate3d(0vh, -23.3vh, 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 style="overflow:hidden">
<img src="http://i.imgur.com/nFv2eoG.png" class="news" alt="Lime" />
<img src="http://i.imgur.com/n5eovvX.png" class="faq" alt="Lime" />
<img src="http://i.imgur.com/b7iknCb.png" class="kjøp" alt="Lime" />
<img src="http://i.imgur.com/yJqMvpT.png" class="følg" alt="Lime" />
<img src="http://i.imgur.com/QPQSByR.png" class="baeA" alt="Lime" />
<img src="http://i.imgur.com/QPQSByR.png" class="baeB" alt="Lime" />
<img src="http://i.imgur.com/QPQSByR.png" class="baeC" alt="Lime" />
<img src="http://i.imgur.com/QPQSByR.png" class="baeD" alt="Lime" />
<img src="http://i.imgur.com/Tp9TaNM.png" class="fb" alt="Lime" />
<img src="http://i.imgur.com/iXR7rmq.png" class="insta" alt="Lime" />
<img src="http://i.imgur.com/STWEZOp.png" class="snap" alt="Lime" />
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></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 class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
</div>
<div class="item">
<img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
</div>
<div class="item">
<img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
</div>
<div class="item">
<img src="http://i.imgur.com/WioHdhd.png" alt="Sko" >
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>进行全屏幕或一切都将得到混乱，我也不知道如何解决〜感叹
问题在于图标不包含在'.følg'元素中。用backgrounde图像制作'.følg'''div'然后在里面添加图标会更好。 – Rhumborl