Question

我想在我的网站底部显示Google广告，但我希望它只在鼠标悬停（或点击）箭头图标时显示。我不知道你是否理解我的意思。 当鼠标悬停在页面底部的箭头时，我希望AD从无处滑动。

该功能需要哪些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>

悬停时在页面底部显示ADS

1 个答案: