在鼠标上输入实现 [英] on mouse enter implementation

问题描述

我在wordpress页面上实现了以下代码.

I have this below code implemented on a wordpress page.

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  margin: 10px auto;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.parent:hover .child {
  display: none;
}

p {
  padding: 1em;
}

<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

并且我有兴趣对其进行一些更改:

and I am interested to make some changes on it :

1. 在出现child而不是parent onmouseenter
时淡入 鼠标离开图片区域并变回后，
2. 保持child 只能由下一个 mouseenter 来parent.(类似于此))；

1. fade in when the child appear instead of parent onmouseenter
2. remain child after the mouse left the picture area and change back to parent only by the next mouseenter.(something like this);

我找到了页面，其中包含一些详细信息，我认为 onmouseenter 功能可能是一个起点，但我不确定如何实现这些规范.

I've found a page with some details and I think that onmouseenter function could be a place to start but I am not so sure how can I implement these specs.

有什么想法吗?

推荐答案

您可以使用JavaScript执行此类操作，以侦听鼠标输入，并使用CSS进行转换:

You can do something like this using JavaScript to listen for mouse enters and CSS for transitions:

var shown = true;
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mouseenter', function(){
  child.style.opacity = shown ? 0 : 1;
  shown = !shown;
});

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  margin: 10px auto;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transition: opacity 0.5s linear;
}


p {
  padding: 1em;
}

<div class="parent">
<img src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://maui.hawaii.edu/tlc/wp-content/uploads/sites/53/2013/11/testing.jpg" alt="" width="500px" height="auto" />
</div>
</div>

这篇关于在鼠标上输入实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！