.append onmouseout jQuery를 제거하십시오

Question

누군가가 내 블로그 게시물의 제목을 마우스 오버 할 때 '더 읽기'텍스트를 추가하려고합니다. 나는 사용을 시도했다 $(".blogpost").mouseover(function(){ $(this).append(" - read more..."); }); 그러나 나는 더 많은 것을 읽는 제거하는 방법을 모른다. .. onmouseout.

Answer 1

추가 스팬에서 자세한 내용을 읽어 밖으로

추가 더 범위에 싸여 마우스에 그 범위를 제거합니다.

$(".blogpost").mouseover(function(){ $(this).append("<span id="read" - read more..."></span>); }); 

이 경우 읽은 ID와 함께 추가 된 스팬을 제거하십시오.

$(".blogpost").mouseout(function(){ $('#read').remove(); }); 

Answer 2

적절한 방법은 HTML에 이미 추가 텍스트가 있고 CSS : hover 속성을 사용하여 텍스트를 숨기고 표시하는 것입니다. 이를 위해 javascript를 사용하면 불필요한 수준의 복잡성과 취성이 추가됩니다.

Answer 3

당신도이 시도 할 수 있습니다 :

$(".blogpost").mouseout(function(){ 
    $(this).html(""); 
}); 

당신이 자식 요소가없는 가정. 당신이 자바 스크립트에서이 작업을 수행하려면

Answer 4

, 당신은 같은 것을 할 수 있습니다

데모 : 만 보여이 생성 된 후에는 숨길 것 http://jsfiddle.net/a3jzF/

$(".blogpost").mouseover(function() { 
    $(this).append("<div class='readmore'> - read more...</div>"); 
}).mouseout(function(){ 
    $('.readmore').remove();   
});​ 

Answer 5

. .hover()는 두 가지 기능을 수행합니다.

$(".blogpost").hover(function(){ 
    var $span = $(this).find('.more'); 

    if ($span.length) { 
    $span.show(); 
    } else { 
    $(this).append('<span class="more"> - read more...</span>'); 
    } 

}, function(){ 
    var $span = $(this).find('.more'); 
    $span.hide(); 
}); 

또는 사용 CSS를 전용 (이 낫다) : .show() 마우스 오버와로 마우스에 .hide()에

<div class="blostpost"> 
... 
<span class="more">read more</span> 
</div> 

.blogpost .more { display: none; } 
.blogpost:hover .more { display: block; }