image OnMouse popout from container

Question

컨테이너 div 아래에 숨기고 싶은 "ad"를 배치하고있는 웹 사이트를 만들고 있지만 여전히 그 팁을 볼 수 있습니다. 그 위에 커서를 가져 가면 컨테이너 아래에서 부드럽게 나오기를 바랍니다. 그리고 당신이 커서를 제거하면 컨테이너의 첫 번째 위치로 돌아가고 싶을 것입니다. 누구든지 간단한 CSS, jquery 또는 자바 스크립트를 사용할 수 있습니까?

감사합니다.

편집 모든 응답에 대한

감사합니다! 방금 ​​가져 오지 못해서 유감스럽게 생각하거나 질문에 불분명 한 점이 있지만 유감스럽게도 이미지가 오른쪽의 내 컨테이너 뒤에서 내 배경으로 원활하게 이동되기를 바랍니다. 그래서 나는 그것이 움직이기를 바랄뿐입니다. 그래서 나는 기본적으로 내 그림이 컨테이너 아래에서 4 등 뒤로 부드럽게 움직 이길 원합니다. 그림의 끝 위로 커서를 가져 가면 천천히 컨테이너 아래의 위치에서 벗어나고 싶을 때가 있습니다. 그러면 천천히 돌아가고 싶습니다. 나는 내 표제가 약간 오도하기 쉽다는 것을 알았다. 미안하다. 누군가 나를 도울 수 있기를 바랍니다.

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

이것은

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

Live Demo

스크립트 재미

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>