Mouseenter和Mouseleave单击

Question

I have iframe pages which shows up when you hover. 我有iframe页面，当你悬停时显示。 I want to change this to click. 我想将其更改为单击。 Somehow it's not working. 不知怎的，它不起作用。

JS: 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: 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: HTML：

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

Sometime my tryout worked out, but only on the iframe itself(blank), therefore nothing happens when the iframe is filled with content, maybe it's only a problem of target. 有时候我的试用版已经完成，但只有iframe本身（空白），因此当iframe填充内容时没有任何反应，也许这只是目标问题。

Answer 1

I don't really understand your question and your click code is missing. 我真的不明白你的问题，你的click代码丢失了。 From what I hardly understand, you could achive this with this code: 从我几乎不了解，您可以使用此代码实现此目的：

 $('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>

Mouseenter和Mouseleave单击

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-12-11 11:13:44

Mouseenter和Mouseleave单击

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-12-11 11:13:44

解决方案1
0 已采纳 2016-12-11 11:13:44