[英]Mouseenter&Mouseleave to Click
我有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填充內容時沒有任何反應,也許這只是目標問題。
我真的不明白你的問題,你的click
代碼丟失了。 從我幾乎不了解,您可以使用此代碼實現此目的:
$('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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.