javascript - 悬停时在页面底部显示广告

Question

我想在我的网站底部显示 Google Ads，但我希望它仅在鼠标悬停(或点击)箭头图标时显示。我不知道你是否明白我的意思。 我希望当鼠标悬停在页面底部的箭头上时，广告从任何地方滑动。

该功能需要哪些 JS 和 CSS 代码？

我现在的代码:

HTML

<div id="footer"> <center><script src="http://fanscity.eu/ads/728x90.js"></script></center> </div>

CSS

#footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.69);
  padding: 20px;
}

谢谢!

Answer 1

我想你需要this

更新:

HTML

<div id="footer">footer</div>
<img id="img" src="arrow.png"/>

CSS

#footer{
    display:none;
    height:40px;
    background-color:#666;
    position:absolute;
    width:100%;
    bottom:0;
    left:0
}    
#img{
    position:absolute;
    bottom:0;
    right:0  
}

JS

<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">     
$(document).ready(function(e) {
    var ishover = false;
    $(document).on("mouseover",'#footer',function(){
        ishover = true;
    }).on("mouseleave",'#footer',function(){
        $(this).stop().fadeOut();
        ishover = false;
    }).on("mouseover",'#img',function(){
        $('#footer').stop().fadeIn();
    }).on("mouseleave",'#img',function(){
        if(!ishover)
        $('#footer').stop().fadeIn();
    });
});
</script>