Is it possible to simulate hover using JavaScript Events? I tried injecting mouseover event on the target element but no luck.
For example, if there is a link that has a hover selector, is it possible to "hover" over it using JavaScript Events? Basically, I want to trigger CSS hover. You can assume I can't use jQuery.
The jQuery hover event is just using mouseenter and mouseleave events. Here is the source of jQuery's hover:
function (fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut || fnOver);
}
Yes, you would simply add onMouseOver and onMouseOut events to the element in question
Like this:
<div class="something" onmouseover="hover(this);" onmouseout="unhover(this);">
Then make your javascript change the element's class (if you want two different CSS classes) or simply modify the element's style directly. You could do something like this.
<script>
function hover(element) {
element.setAttribute('class', 'something hover');
}
function unhover(element) {
element.setAttribute('class', 'something');
}
</script>
Please note that you can also use a library like jQuery to handle this even more simply.
Actually, CSS hover event is more convenient than just binding these two events mouseenter and mouseleave. So it'll need a little more efforts, which are:
1.Clone the element
2.Add a listener to mouseenter event
3.Recursively redo step 1,2 and restore the cloned element on mouseleave
Here is my working draft.
function bindHoverEvent(element,listener){
var originalElement = element.cloneNode(true);
element.addEventListener('mouseenter',listener);
element.addEventListener('mouseleave',function(){
bindHoverEvent(originalElement,listener);
this.parentNode.replaceChild(originalElement,this);
});
}
Please note that, cloneNode does not copy event listeners, so you need to manually rebind events to the cloned element and all its children yourself.
It is possible to simulate hover using JavaScript events. I created a module for swapping out images on hover. You can experiment and adapt the module to fit your needs. For the example, I made the image paths and DOM selection elements generic.
// module for swapping out images on hover
var imageSwap = (function ModuleFactory() {
"use strict";
var imageContainer = document.getElementById("image-container"),
image = document.getElementsByClassName("image")[0],
imageSource1 = 'path/to/your/image1',
imageSource2 = 'path/to/your/image2';
function handleImageSwap(e) {
if (e.target.id === "image-container") {
image.setAttribute("src", imageSource2);
e.target.addEventListener("mouseleave", function _handler_() {
image.setAttribute("src", imageSource1);
e.target.removeEventListener("mouseleave", _handler_, false);
}, false);
}
}
function init() {
imageContainer.addEventListener("mouseenter", handleImageSwap, false);
}
var publicAPI = {
init: init
};
return publicAPI;
})();
document.addEventListener("DOMContentLoaded", imageSwap.init(), false);