JSFiddle - React, Tailwind, and code Playground

by Juri Rudi

HTML

<center>
<table>
  <tr>
    <th>CSS</th>
		<th>HTML</th>
    <th>jQuery</th>
  </tr>
  <tr>
		<td id="id_hover_css">:hover</td>
    <td></td>
    <td id="id_hover_jquery">.hover</td>
  </tr>
	<tr>
		<td></td>
    <td onmouseenter="func_onmouseenter()">onmouseenter</td>
    <td id="id_mouseenter">mouseenter</td>
  </tr>
	<tr>
		<td></td>
    <td onmouseleave="func_onmouseleave()">onmouseleave</td>
    <td id="id_mouseleave">mouseleave</td>
  </tr>
  <tr>
		<td></td>
    <td onmousemove="func_onmousemove()">onmousemove</td>
    <td id="id_mousemove">mousemove</td>
  </tr>
  <tr>
		<td></td>
    <td onmouseout="func_onmouseout()">onmouseout</td>
    <td id="id_mouseout">mouseout</td>
  </tr>
	<tr>
		<td></td>
    <td onmouseover="func_onmouseover()">onmouseover</td>
    <td id="id_mouseover">mouseover</td>
  </tr>
	<tr>
    <td></td>
		<td></td>
    <td id="id_on">on</td>
  </tr>
	<tr>
    <td></td>
		<td></td>
    <td id="id_one">one</td>
  </tr>
</table>
</center>

CSS

#id_hover_css:hover {
  background-color: yellow;
}
td {
  border: 1px solid black;
	border-radius: 10px;
	background-color: #e6eeff;
  width: 150px;
  height: 50px;
	text-align: center;
}
.invisibile {
	visibility: hidden;
}

JavaScript

/* HTML */
function func_onmouseenter() {
	alert("OK");
}
function func_onmouseleave() {
	alert("OK");
}
function func_onmousemove() {
	alert("OK");
}
function func_onmouseout() {
	alert("OK");
}
function func_onmouseover() {
	alert("OK");
}
/* jQuery */
$("#id_hover_jquery").hover(
	function(){ // mouseover
		$(this).css("background-color", "yellow")
		},
	function(){ // mouseout
		$(this).css("background-color", "#e6eeff")
		}
)
$("#id_mouseenter").mouseenter(function() {
  alert("OK");
});
$("#id_mouseleave").mouseleave(function() {
  alert("OK");
});
$("#id_mousemove").mousemove(function() {
  alert("OK");
});
$("#id_mouseout").mouseout(function() {
  alert("OK");
});
$("#id_mouseover").mouseover(function() {
  alert("OK");
});
$("#id_on").on("mouseenter", function() {
  alert("OK");
});
$("#id_one").one("mouseenter", function() {
  alert("OK");
});