我在 "Følg Oss" 悬停动画中遇到了问题，当悬停在 Facebook、Snapchat 和 Instagram 图标上时，该动画会反向。 我不想让这种情况发生。 我只希望它在你没有悬停在 ".følg" 上时正常滑动回来。
另一个问题是我无法将图标制成链接，因为如果我在 HTML 中添加 href，则动画将无法工作，而在图像上应该添加链接。
我确实处于编程的世界中，所以如果我不能很好地表达我的问题，我很抱歉...
另一个问题是我无法将图标制成链接，因为如果我在 HTML 中添加 href，则动画将无法工作，而在图像上应该添加链接。
我确实处于编程的世界中，所以如果我不能很好地表达我的问题，我很抱歉...
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, -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元素内。最好将.følg设置为带有背景图片的div，然后将图标放在其中。 - Rhumborl