Html 影响重叠元素当div悬停时，动画将反转_Html_Css_Css Animations

Html 影响重叠元素当div悬停时，动画将反转

html css

Html 影响重叠元素当div悬停时，动画将反转,html,css,css-animations,Html,Css,Css Animations,当facebook、snapchat和instagram图标悬停时，“Følg Oss”悬停动画被反转，我遇到了一些问题我不希望发生这种情况。我只希望当你不在.følg上盘旋时，它能正常向后滑动另一个问题是，我无法将图标制作成链接，因为如果我在html中添加href，动画将无法工作，正如您在图像上所希望的那样我真的很喜欢密码子，所以如果我不能很好地解决我的问题，我向你道歉正文{ 背景色：黑色；背景重复：重复；背景附件：固定；背景位置：中上；背景尺寸：100% 宽度：100%； }

当facebook、snapchat和instagram图标悬停时，“Følg Oss”悬停动画被反转，我遇到了一些问题我不希望发生这种情况。我只希望当你不在.følg上盘旋时，它能正常向后滑动

另一个问题是，我无法将图标制作成链接，因为如果我在html中添加href，动画将无法工作，正如您在图像上所希望的那样

我真的很喜欢密码子，所以如果我不能很好地解决我的问题，我向你道歉

正文{
背景色：黑色；
背景重复：重复；
背景附件：固定；
背景位置：中上；
背景尺寸：100%
宽度：100%；
}
følg先生{
位置：绝对；顶部：90%；左侧：25%；z指数：1507；
宽度：50%；
转换：转换。6s易进易出；
}
følg：悬停{
变换：translate3d（0vh，-20.3vh，0vh）；
}
.følg:hover~.fb{
变换：translate3d（0vh，-23.3vh，0vh）；
}
.følg:hover~.insta{
变换：translate3d（0vh，-23.3vh，0vh）；
}
.følg:悬停~.snap{
变换：translate3d（0vh，-23.3vh，0vh）；
}
.常见问题{
图像附件：固定；
位置：绝对；顶部：-1%；左侧：13%；z指数：3；
宽度：24%；
转换：转换。2s轻松输入输出；
}
乔普先生{
图像附件：固定；
位置：绝对；顶部：-1%；左侧：37%；z指数：4；
宽度：24%；
转换：转换。2s轻松输入输出；
}
.新闻{
图像附件：固定；
位置：绝对；顶部：-1%；左侧：61%；z指数：2；
宽度：24%；
转换：转换。2s轻松输入输出；
}
.news:hover、.kjøp:hover、.faq:hover{
转换：translate3d（0vh、3vh、0vh）；
}
baeA先生{
图像附件：固定；
位置：绝对；顶部：0%；左侧：59%；z指数：1505；
宽度：4%；
}
baeB先生{
图像附件：固定；
位置：绝对；顶部：0%；左侧：35%；z指数：1504；
宽度：4%；
}
baeC先生{
图像附件：固定；
位置：绝对；顶部：0%；左侧：83%；z指数：1503；
宽度：3%；
}
baeD先生{
图像附件：固定；
位置：绝对；顶部：0%；左侧：12%；z指数：1502；
宽度：3%；
}
.fb{
图像附件：固定；
位置：绝对；顶部：110%；左侧：38%；z指数：1509；
宽度：6%；
转换：转换。8s易进易出；
}
.insta{
图像附件：固定；
位置：绝对；顶部：110%；左侧：46.5%；z指数：1509；
宽度：6%；
转换：转换。8s易进易出；
}
.啪{
图像附件：固定；
位置：绝对；顶部：110%；左侧：55%；z指数：1509；
宽度：6%；
转换：转换。8s易进易出；
}


.carousel-inner>.item>img，
.carousel-inner>.item>a>img{
宽度：100%；
保证金：自动；
}
函数initialiseAxisImages（）{
var axis=document.getElementById（'axis'）；
var axisImages=axis.getElementsByTagName（'News'）；
axisImages[0]。类列表。删除（'News'）；
axisImages[1]。classList.remove（'move-left'）；
}
addEventListener（'load'，initialiseAxisImages，false）；

您仍然需要进行一些编辑。首先，图像不足以作为较低的抽屉。您需要为它创建一个div，并在其中添加三个图像（fb、insta和snapchat），然后将转换作为一个整体应用到抽屉以及抽屉中的所有结果链接

如何创建链接显示在上面的代码中。虽然图像链接的格式和定位不是最好的，但它应该为您提供一些关于如何进行的想法

希望有帮助。

问题是图标不包含在

.følg

元素中。最好将

.følg

div

制作成背景图像，然后在其中添加图标。

<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" /> 
    <span id="fblink"><a id="" href="https://www.facebook.com/"><img src="http://i.imgur.com/Tp9TaNM.png" class="fb" alt="Lime" /> </a></span>
    <a id="instalink" href="https://www.instagram.com/?hl=en"><img src="http://i.imgur.com/iXR7rmq.png" class="insta" alt="Lime" /> </a>
    <a id="snaplink" href="https://www.snapchat.com/"><img src="http://i.imgur.com/STWEZOp.png" class="snap" alt="Lime" /></a>

    <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>

.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, -20.3vh, 0vh);
}
.følg:hover ~#fblink{
    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%;
}
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;
}