Question

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

谢谢！

修改

感谢所有回复！我很抱歉，如果我没有得到它，或者我在我的问题中有点不清楚，但我希望图像平滑地从我的容器后面水平移动到我的背景所在的位置。所以我希望它能够移动，而不仅仅是弹出。所以我基本上希望我的照片顺利地从容器下面向后移动并且第四个。当我将光标放在图片的顶端时，我希望它从容器下方的位置慢慢移出，当我放开时，我希望它慢慢地返回。我现在看到我的头衔有点误导，对不起。希望有人可以帮助我！

Answer 1

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

Answer 2

使用jQuery hover方法：

$("#demo").hover(
    function() {
        $(this).css({'background-color', 'red'}).height(100).width(100);
    },
    function() {
        $(this).css({'background-color', 'red'}).height(10).width(10);
    }
);

Answer 3

这很有趣

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>

图像OnMouse从容器中弹出

3 个答案: