2016-12-11 1 views
1

마우스를 올리면 iframe 페이지가 나타납니다. 나는 이것을 클릭으로 바꾸고 싶다. 어떻게 든 작동하지 않습니다.마우스를 가져 가서 클릭하십시오.

JS :

$('section div').mouseenter(function(){ 
    $(this).css('height', '80vh'); 
    $(this).css('width', '100%'); 
    $('#info').css('width', '100%'); 
}); 

$('section div').mouseleave(function(){ 
    $(this).css('height', '2.5vh'); 
    $(this).css('width', '100%'); 
    $('#info').css('width', '100%'); 
}); 

CSS :

iframe { 
    border: 0; 
    width: 100%; 
    height: 100%; 
    transition: 1s; 
    z-index: 2000; 
} 

#info { 
    position: fixed; 
    top: 0; 
    height: 80vh; 
    width: 100%; 
    transition: 1s; 
    z-index: 1; 
} 

section { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    z-index: 2000; 
} 

HTML이 :

<body> 
    <section></section> 
</body> 

는 언젠가 내 적격 심사는하지만 iframe이 자체 (빈)에, 밖으로 일 때문에 아무 일도 일어나지 않는다 iframe에 내용이 가득 차면 대상의 문제 일뿐입니다.

+2

어디'click' 코드입니까? – Xufox

+0

내가 만든 클릭 코드가 전혀 작동하지 않습니다. 여기 mouseenter 및 mouseleave 대신 클릭하여 얻고 자하는 것이 있습니다 : jsfiddle.net/T73A/tsq8h6pc – 73A

+0

작동하지 않는 코드는 질문 자체에 있어야합니다. – Xufox

답변

0

고객님의 질문에 대한 답변을 잘 이해하지 못해서 click 코드가 없습니다. 내가 거의 이해하지 바로는,이 코드와이 achive 수 :

$('section div').click(function() { 
 
    // This part is not really needed 
 
    if (this.state === undefined) { 
 
    this.state = 0; 
 
    } 
 
    // end of not needed part 
 
    if (this.state) { 
 
    $(this).css('height', '2.5vh'); 
 
    $(this).css('width', '100%'); 
 
    $('#info').css('width', '100%'); 
 
    this.state = 0; 
 
    } else { 
 
    $(this).css('height', '80vh'); 
 
    $(this).css('width', '100%'); 
 
    $('#info').css('width', '100%'); 
 
    this.state = 1; 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
    section { 
 
    margin: 10px; 
 
    } 
 
</style> 
 
<div> 
 
    <section> 
 
    <div style="background-color: red; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: green; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: blue; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
    <section> 
 
    <div style="background-color: black; height: 2.5vh; width: 100%"></div> 
 
    </section> 
 
</div>

+0

다음은 mouseenter 및 mouseleave 대신 클릭하여 얻으려고하는 내용입니다. https://jsfiddle.net/T73A/tsq8h6pc/ – 73A

+0

무슨 일이 일어나는지 div에 wierd hitbox가 있으며 10 분을 주겠다고합니다. – Device

+0

좋습니다. 버그는 동일합니다. div에는 wierd hitbox가 있습니다. 내가 볼 수있는 유일한 해결 방법은 click 이벤트를 트리거하는 핸들러 div를 만드는 것입니다. – Device

관련 문제