Mouseenter&Mouseleave 点击答案

【问题标题】：Mouseenter&Mouseleave to ClickMouseenter&Mouseleave 点击
【发布时间】：2016-12-11 19:25:51
【问题描述】：

我有 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 代码在哪里？
我制作的点击代码根本不起作用。这是我想要在点击时实现的，而不是 mouseenter 和 mouseleave：jsfiddle.net/T73A/tsq8h6pc
非工作代码需要在问题本身中。
这里是：$('section div').click(function(){ $(this).css('height', '80vh'); $(this).css('宽度', '100%');$('#info').css('width', '100%');});不知何故，我无法获得正确的碰撞箱，我现在正在尝试其他方法。
问题本身。不作为缺少格式的评论。

标签： javascript click mouseenter

【解决方案1】：

我不太明白您的问题，并且您的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>

【讨论】：

这是我想要实现的点击，而不是 mouseenter 和 mouseleave：jsfiddle.net/T73A/tsq8h6pc
我知道发生了什么，div 有奇怪的 hitbox，给我 10 分钟
好的，所以bug是一样的，div有一个奇怪的hitbox。我能看到的唯一解决方法是制作一个会触发点击事件的处理程序 div。
这也是我的想法，点击事件无法获取正确的目标。我会尝试重新考虑。谢谢