我有 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 充满内容时没有任何反应，也许这只是目标的问题。
最佳答案
我不太明白您的问题，并且您的点击代码丢失。据我所知，您可以使用以下代码来实现此目的:
$('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>关于javascript - 鼠标输入 鼠标离开单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41085262/