Mouse Events

by abhitalks

HTML

<div id="content1" class="content">Tooltip 1</div>

<div id="container2" class="wrap">
    <div id="content2" class="content">Tooltip 2</div>
</div>

CSS

#content1:hover {
    background-color: deepskyblue;
    cursor: pointer;
    -webkit-transform: translateY(50px);
    -webkit-transition: all 500ms;
}

#container2:hover > .content {
    background-color: deepskyblue;
    cursor: pointer;
    -webkit-transform: translateY(50px);
    -webkit-transition: all 500ms;
}

.wrap {
    width: 70px;
    height: 70px;
    background: beige;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px auto;
    padding: 5px;    
}

.content {
    width: 50px;
    height: 50px;
    background: coral;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px auto;
    padding: 5px;
    -webkit-transition: -webkit-transform 2s;
}

JavaScript

$("#content1, #container2").on("mouseover", function() {
    console.log("mouseover");
});
$("#content1, #container2").on("mouseenter", function(e) {
    console.log("mouseenter");
});
/*
$("#content1, #container2").on("mousemove", function() {
    console.log("mousemove");
});
*/
$("#content1, #container2").on("mouseout", function() {
    console.log(" mouseout");
});
$("#content1, #container2").on("mouseleave", function() {
    console.log("mouseleave");
});