html – 当div被悬停时影响重叠元素,动画被反转

2024年1月2日 153次阅读

当facebook,Snapchat和Instagram图标悬停时,我遇到了“FølgOss”悬停动画被颠倒的问题.我不希望这种情况发生.当你没有徘徊在.følg时,我只是想让它通常滑回来

另一个问题是我无法将图标变成链接,因为如果我在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, -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>

做全屏或一切都会混乱,我也不知道如何解决〜叹息

最佳答案

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

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, -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;
}

你仍然需要做一些编辑.首先,图像不足以作为下抽屉.您将需要为其创建一个div并在其中添加三个图像(fb,insta和snapchat)并将过渡作为一个整体应用于抽屉以及其中的所有结果链接.

如何创建链接显示在上面的代码中.虽然图像链接的格式化和定位并不是最好的,但它应该为您提供一些如何实现它的想法.

希望能帮助到你.

点赞