onmouseover 이벤트가 발생하면 하이퍼 링크의 오른쪽에 div가 표시 될 때 다음 코드를 어떻게 변경해야합니까?jquery hover 함수
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('a.moreDetails').hover(function() {
$(this).next().toggle('fast');
});
});
</script>
<body>
<a href="#" class="moreDetails">(details)</a>
<div class="details">User 1</div>
</body>
</html>
:
$("a.moreDetails").hover(
function(){
$(this).next().show('fast');
},
function(){
$(this).next().hide('fast');
}
);
당신을 또한 닫는 </head> 태그가 누락 된 것으로 보입니다. 링크 옆에 요소가 나타나게하려면 마크 업 변경, 자바 스크립트 조작 또는 CSS 규칙이 필요합니다. 다음과 같이 사소한 변경을 할 수 있습니다.
<a href="#" class="moreDetails">(details)</a>
<span class="details">User 1</span>
hover()는 두 개의 인수를 취하십시오이 활성화 된 때를위한 콜백과 다른 그 때문에 비활성화 할 때 :
$("a.moreDetails").hover(function() {
$(this).next("div.details").stop().show("fast");
}, function() {
$(this).next("div.details").stop().show("slow");
});
당신은 내가 stop()를 호출하고있어주의 것입니다. 애니메이션을 사용할 때 좋은 습관이 들지 않으면 애니메이션 대기열에서 의도하지 않은 시각적 인공물을 얻을 수 있습니다.
편집 : 요소 옆에 나타나는 것은 다소 어려움이 있습니다. 당신은 CSS 변경할 수 있습니다
div.details { display: inline; }
을 그리고 링크 옆에 표시하지만 그들은 display: block 물건을 설정하는 경향이 있기 때문에 다음의 jQuery 효과가 정말 제대로 작동하지 않습니다. 다음
div.details { display: inline; }
div.hidden { display: none; }
과 : 당신이 원하는 또는 효과가 필요하지 않은 경우에는 그냥 클래스를 사용할 수 있습니다
$("a.moreDetails").hover(function() {
$(this).next("div.details").addClass("hidden");
}, function() {
$(this).next("div.details").removeClass("hidden");
});
호버가 매개 변수로 2 회 이상 걸리며 처리합니다. 당신은 첫 번째에 나타나야하고 두 번째에 숨어 있어야합니다. 그렇다면 클래스가 인라인을 만들지 않는 div는 아마도 범위가되어야합니다
고마워 ...하지만 하이퍼 링크 옆에 표시하는 방법 – Hulk
@ Hulk : 변경할 수 있습니다. 'div'에서'span'으로 바꾸거나 스타일에'display : inline'을 추가 할 수 있습니다. – Sampson
고마워 ...................... – Hulk