0

我正在制作一个网站，在其中放置一个“广告”，我想将其隐藏在容器 div 下，但您仍然可以看到它的提示。当您将光标移到它上面时，我希望它顺利地从容器下方出来。当你移除光标时，我希望它回到容器下的第一个位置。有人知道我可以使用的简单 css、jquery 或 javascript 吗？

谢谢！

编辑

感谢所有的回复！如果我没有得到它，或者我的问题有点不清楚，我很抱歉，但我希望图像从右侧的容器后面平滑地水平移动到我的背景所在的位置。所以我希望它移动而不是直接弹出。所以我基本上希望我的图片从容器下方顺利地向后移动。当我将光标放在图片的尖端时，我希望它从容器下方的位置慢慢移出，当我放手时，我希望它慢慢返回。我现在看到我的标题有点误导，我很抱歉。希望可以有人帮帮我！

4

3 回答 3

2 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#demo").on({
    mouseenter: function() {
var str = "background-color:red;  height: 100px; width: 100px";
$(this).attr("style", str);
    },
    mouseleave: function() {
var str = "background-color:red;  height: 10px; width: 10px";
$(this).attr("style", str);
    }
});
});

</script>

<div id="demo" style="background-color:red;  height: 10px; width: 10px"> <br/><br/><br/></div>
于 2013-10-16T21:15:59.583 回答
0

使用 jQuery悬停方法：

$("#demo").hover(
    function() {
        $(this).css({'background-color', 'red'}).height(100).width(100);
    },
    function() {
        $(this).css({'background-color', 'red'}).height(10).width(10);
    }
);
于 2013-10-16T21:25:08.877 回答
0

这很有趣

Live Demo

脚本

$(function() {
  $("#demo").on({
    mouseenter: function () {
        $(this).css({
            "height": "100px",
            "width": "100px"
        });
    },
    mouseleave: function () {
        $(this).css({
            "height": "10px",
            "width": "10px"
        });
    }
  });
});

CSS

#demo {
    background-color:red;
    height: 10px;
    width: 10px;
    position:absolute;
    top:100px;
    left:100px;
    overflow:hidden;
}
#main {
    background-color:yellow;
    height: 100px;
    width: 100px;
    position:absolute;
    top:5px;
    left:5px;
}

HTML

<div id="demo">This is an ad</div>
<div id="main">Here is a div</div>
于 2013-10-16T21:37:27.610 回答