Как прокручивать div при зависании над другим элементом

У меня есть абсолютный div, который находится за моим нижним колонтитулом. Когда я навис над другим элементом (#snapchat), я хочу, чтобы этот абсолютный div прокручивался из-за нижнего колонтитула и останавливался над ним там, где его можно было увидеть. Как мне это сделать?Как прокручивать 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>

источник

2016-12-01 Learning to Code

Вы хотите, чтобы он поднимался каждый раз, когда мышь зависала, или подниматься все сразу, когда мышь нависает над? –

Я хочу .snapcode-footer подниматься каждый раз, когда кто-то нависает над #snapchat, а затем возвращается назад за нижний колонтитул, когда они больше не нависают над ним. –

Я повторно позиционируется свой div.snapcode колонтитула и применяется свойство CSS для

#snapchat: парить ~ .snapcode-сноска. надеюсь, что это поможет :)

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

источник

2016-12-01 04:45:21

После нескольких трюков это отлично поработало. Мне нужно больше узнать об использовании «~» в css. Благодарю. –

приветствую :) –

Я предлагаю дать snapcode-футовый идентификатор, чтобы сделать его легче контролировать.

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

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

Затем сделать скрипт на #snapchat

<li id="snapchat"OnMouseEnter = "зависать = 1" onmouseout = "зависать = 0"><a href="#"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat @hullandspar"/></a></li>

Наконец, вы делаете сценарий, если мышь висит над элементом #snapchat, чтобы увеличить высоту или остаться в одном месте.

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

источник

2016-12-01 05:01:18

Как прокручивать div при зависании над другим элементом

ответ

Смежные вопросы