JQuery는 DIV를 마우스 오버시 다른 DIV에 표시합니다.

Question

간단한 해결책이 있지만 Jquery 놈입니다. 도와주세요. 마우스 오버시 다른 DIV에 DIV를 표시하려면 어떻게합니까?

예, 나는이 있습니다

<div class="box"> Info about a game </div> 

나는 "오버레이"사업부 "상자"

<div class="overlay"> Play </div> 

가 어떻게 JQuery와 함께 것을 할 수있는 다른 사업부를 원하십니까?

죄송합니다. 미리 감사드립니다.

Answer 1

정확하게 이해하면 box 위로 마우스를 가져 가면 overlay 만 표시하려고합니다. 당신은/보여주기 위해 애니메이션/jQuery를 사용하는 것을 선호하는 경우 overlay 다음 사용할 수 있습니다 숨기기

<div class="box"> 
    Info about a game 
    <div class="overlay"> Play </div> 
</div>​ 

div.box div.overlay 
{ 
    display:none; 
} 

​div.box:hover div.overlay 
{ 
display:block; 
}​ 

http://jsfiddle.net/Curt/BC4eY/

---

:

당신은 CSS의 사이비 :hover를 사용할 수

$(function(){ 
    $(".box").hover(function(){ 
     $(this).find(".overlay").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".overlay").fadeOut(); 
        } 
        );   
});​ 

http://jsfiddle.net/Curt/BC4eY/2/

Answer 2

원하는 위치에 '약'클래스가있는 다른 DIV 요소를 가질 수 있습니다. 그리고 CSS 스타일을가집니다 : opacity : 0; JS에서 다음

당신은 작은 스크립트를 작성해야, 온로드에서 같은/준비 기능, 어떤 위치 할 것이다 :이 요소 위에 뭔가를 오버레이됩니다

$(document).ready(function() { 
    $('div.box').hover(function() { 
    $(this).children('.overlay').fadeIn(); 
    }, function() { 
    $(this).children('.overlay').fadeOut(); 
    }); 
}); 

경우, 그것은 더 나은입니다 CSS 속성 'display : none'을 사용하여이 투명한 요소가 마우스 이벤트를 인계받는 것을 방지하십시오.

Answer 3

기본 JavaScript (jQuery 라이브러리 필요 없음)로 수행하는 방법이 있습니다. 당신이 ES6을 사용하지 않는 경우 당신은 정기적으로 오래된 function expressions로 arrow functions을 대체 할 수

var box = document.getElementById("box"); 
 
var overlay = document.getElementById("overlay"); 
 

 
var init =() => { 
 
    overlay.style.display = 'none'; //hide by default when page is shown 
 

 
    box.addEventListener('mouseover',() => { 
 
    overlay.style.display = 'inline'; 
 
    }); 
 

 
    box.addEventListener('mouseout',() => { 
 
    overlay.style.display = 'none'; 
 
    }); 
 
}; 
 

 
init();

<div id="box"> Info about a game<br /> 
 
    <div id="overlay">Play</div> 
 
</div>