文章/答案/技术大牛

发布

社区首页 >问答首页 >Mouseenter&Mouseleave点击

问Mouseenter&Mouseleave点击
EN

Stack Overflow用户

提问于 2016-12-11 10:37:37

回答 1查看 44关注 0票数 1

我有一个页面，当你悬停的时候就会出现。我想把这个更改为点击。不知怎么不起作用了。

联署材料：

$('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充满内容时什么都不会发生，也许这只是一个目标问题。

javascript

click

mouseenter

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-11 11:13:44

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41085262

复制

相似问题

问Mouseenter&Mouseleave点击
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mouseenter&Mouseleave点击EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Mouseenter&Mouseleave点击
EN