当鼠标悬停在另一个元素上时如何向上滚动div

时间:2022-11-03 18:06:49

I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?

我有一个绝对的div在我的页脚后面。当我将鼠标悬停在另一个元素(#sn)上时,我希望该绝对div从页脚后面向上滚动并停在可以看到它的上方。我该怎么办?

.snapcode-footer { 
  position: absolute;
  padding-top: 20px;
  text-align: center;
  left: 0;
  right: 0;
}

.sub-sub-footer {
  position: relative;
  z-index: 1;
  background-color: #F7F7F7;
  padding-top: 35px;
  padding-bottom: 20px;
}

.sub-footer {
  position: relative;
  z-index: 1;
  background-color: #edeeef;
  margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>

<div class="sub-sub-footer">
 <ul class="social-footer">
    <li id="twitter"><a href="https://www.twitter.com/wumbo" target="blank"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter @wumbo"/></a></li>
    <li id="snapchat"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @wumbo"/></a></li>
    <li id="insta"><a href="https://www.instagram.com/wumbo" target="blank"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram @wumbo"/></a></li>
    <li id="facebook"><a href="https://www.facebook.com/wumbo" target="blank"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook @wumbo"/></a></li>
 </ul>
</div>

    <div class="sub-footer">
        <div class="container">
            <div class="row">

                <div class="col-md-5-footer">
        <div class="footer-img">    
            <img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
        <div/>  
                </div>

            </div>

2 个解决方案

#1


1  

I'm re-positioned your div.snapcode footer and applied a css property to

我重新定位你的div.snapcode页脚并应用了一个css属性

#snapchat:hover ~ .snapcode-footer . hopes this will help you :)

#sn:hover~ .snapcode-footer。希望这会对你有所帮助:)

.snapcode-footer { 
  position: absolute;
  padding-top: 90px;
  text-align: center;
  left: 0;
  right: 0;
}

.sub-sub-footer {
  position: relative;
  z-index: 1;
  background-color: #F7F7F7;
  padding-top: 35px;
  padding-bottom: 20px;
}

.sub-footer {
  position: relative;
  z-index: 1;
  background-color: #edeeef;
  margin-top: 0px;
}

#snapchat:hover ~ .snapcode-footer{
  z-index:999;
  color:green;
  position:relative;
  margin-bottom:100px;
  margin-left:50px;
  }
  
<div class="sub-sub-footer">
 <ul class="social-footer">
    <li id="twitter"><a href="https://www.twitter.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter @hullandspar"/></a></li>
    <li id="snapchat"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>
   <div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
    <li id="insta"><a href="https://www.instagram.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram @hullandspar"/></a></li>
    <li id="facebook"><a href="https://www.facebook.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook @hullandspar"/></a></li>
 </ul>
</div>

    <div class="sub-footer">
        <div class="container">
            <div class="row">

                <div class="col-md-5-footer">
        <div class="footer-img">    
            <img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
        </div>  
                </div>

            </div>

#2


0  

I'd suggest giving snapcode-footer an id to make it easier to control.

我建议给snapcode-footer一个id以使其更容易控制。

<div class="snapcode-footer" id="snapcode">

<script> var hover = 0; </script>

Then you make a script on #snapchat

然后在#sn上制作一个脚本

<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>

  • 当鼠标悬停在另一个元素上时如何向上滚动div

  • Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place

    最后,如果鼠标悬停在#sn赛车元素上以增加高度或留在一个地方,你可以制作一个脚本

    <script>
    setInterval("if(hover == 1){snapcode.top--}");
    setInterval("if(hover == 0){snapcode.top = 0}");
    </script>
    

    #1


    1  

    I'm re-positioned your div.snapcode footer and applied a css property to

    我重新定位你的div.snapcode页脚并应用了一个css属性

    #snapchat:hover ~ .snapcode-footer . hopes this will help you :)

    #sn:hover~ .snapcode-footer。希望这会对你有所帮助:)

    .snapcode-footer { 
      position: absolute;
      padding-top: 90px;
      text-align: center;
      left: 0;
      right: 0;
    }
    
    .sub-sub-footer {
      position: relative;
      z-index: 1;
      background-color: #F7F7F7;
      padding-top: 35px;
      padding-bottom: 20px;
    }
    
    .sub-footer {
      position: relative;
      z-index: 1;
      background-color: #edeeef;
      margin-top: 0px;
    }
    
    #snapchat:hover ~ .snapcode-footer{
      z-index:999;
      color:green;
      position:relative;
      margin-bottom:100px;
      margin-left:50px;
      }
      
    <div class="sub-sub-footer">
     <ul class="social-footer">
        <li id="twitter"><a href="https://www.twitter.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter @hullandspar"/></a></li>
        <li id="snapchat"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>
       <div class="snapcode-footer">
    <img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
    </div>
        <li id="insta"><a href="https://www.instagram.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram @hullandspar"/></a></li>
        <li id="facebook"><a href="https://www.facebook.com/hullandspar" target="blank"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook @hullandspar"/></a></li>
     </ul>
    </div>
    
        <div class="sub-footer">
            <div class="container">
                <div class="row">
    
                    <div class="col-md-5-footer">
            <div class="footer-img">    
                <img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
            </div>  
                    </div>
    
                </div>

    #2


    0  

    I'd suggest giving snapcode-footer an id to make it easier to control.

    我建议给snapcode-footer一个id以使其更容易控制。

    <div class="snapcode-footer" id="snapcode">
    

    <script> var hover = 0; </script>

    Then you make a script on #snapchat

    然后在#sn上制作一个脚本

    <li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>

  • 当鼠标悬停在另一个元素上时如何向上滚动div

  • Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place

    最后,如果鼠标悬停在#sn赛车元素上以增加高度或留在一个地方,你可以制作一个脚本

    <script>
    setInterval("if(hover == 1){snapcode.top--}");
    setInterval("if(hover == 0){snapcode.top = 0}");
    </script>