html - on mouse enter implementation -

i have below code implemented on 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 interested make changes on :

1. fade in when child appear instead of parent onmouseenter
2. remain child after mouse left picture area , change parent next mouseenter.(something this);

i've found page details , think onmouseenter function place start not sure how can implement these specs.

any thoughts?

you can using javascript listen mouse enters , css 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>