2013-04-01 1 views
-1

사용자가 단락 태그에있는 div 내 텍스트 위에 마우스를 놓을 때 이동 div를 만들려고합니다. 이 일이 생길 때 div가 약간의 픽셀을 이동하기를 원합니다. 또한 div가 브라우저 내부를 스크롤하는 것을 원치 않으므로 브라우저 영역 내에 있어야합니다. 이 범위를 만들려면 어떻게해야합니까? 어떻게 내 div를 움직일 수 있을까요? jquery 또는 JavaScript를 사용해야합니까?이동 가능한 div 요소 만들기

<div class="box"> 
<p>hello everyone</p> 
</div> 
+1

도움이 자바 스크립트 : 심각성에서 P,하지만이 질문은 너무 정의되지 않습니다. –

+0

Kolink가 말했듯이 귀하의 질문은 너무 광범위합니다. jQuery를 사용하고 [this] (http://stackoverflow.com/a/510075/147072) 또는 [this] (http://docs.jquery.com/Effects/animate)와 같은 리소스를 확인하는 것이 좋습니다.) 또는 아마도 [이 다른 링크] (http://www.sitepoint.com/forums/showthread.php?750710-Move-div-with-Jquery)와 같은 것들을 검색 할 때 나오는 "jquery move div"와 같은 것들입니다. 행운을 빕니다 – Mariano

+0

나는 그것에 동의하지 않습니다. 질문 (제한적이지만 아주 작음)은 완벽하게 정의 된 것 같습니다. 사용자가 마우스를 가져갈 때 div가 x 픽셀만큼 이동하기를 원합니다. 이것을 '정의되지 않은'질문으로 쉽게 확장 할 수는 있지만, 기초로서 완벽하게 답할 수 있습니다. –

답변

3

CSS를 사용하는 것이 더 쉽습니다.

.box { 
    margin-left:0px; 
} 
.box:hover { 
    margin-left:5px; 
} 
+0

일부 전환을 추가 할 수도 있습니다 –

0

DEMO

$('.box p').mouseover(function(){ 
    $('.box').css('margin-left','+=2'); 
}); 

을가 fixed

.box{ 
    position:fixed; 
} 
+0

div 태그를 브라우저에서 스크롤하지 못하게 할 수있는 방법이 있습니까? – Gregwest85

+0

@ Gregwest85 편집보기 ......... –

0

위치가 해제 스크롤 가능하게 만들려면이 같은 뭔가 (레이아웃을 수용하기 위해 필요에 따라 확장 명백하게) 일할 수있는 cmallard는 다음과 같이 말했습니다 :

내가 설명/번역을 요청할 수 있음을 알 수 있습니다. 그래서 그가 말했던 것을 날카롭게 할 수 있습니다. 호버는 if 문과 같습니다. 사용자가 마우스를 올려 놓으면이 currect 클래스에 마우스를 올려 놓습니다. 보여, 이제 다른 부분은 아무것도 보이지 않습니다. (5px는 왼쪽으로 가져 가면 왼쪽으로 이동하고 0px는 마우스 오버하지 않고 왼쪽으로 [else]).

희망은 내가 *없이 * 당신이 jQuery를 사용보고 싶어요

관련 문제