I have a table and I am trying to change one div to another div when hovering over it, and then change it back when the hover out event occurs.
Here is my table:
<table id="table2">
<body>
<tr>
<td>
<div id="com.zynga.wwf2.free" class="redips-drag orange" style="border-style: solid; cursor: move; background-image: url(https://lh3.googleusercontent.com/mm9kB_B7UTEMuG2t914nmu2pox-G5a64GlajDaUdf7M5LfKBeYpBbeouyRVgsBATLSA=w300); background-size: 100px 100px; background-repeat: no-repeat; width: 100px;
height: 100px;"></div>
</td>
</tr>
</body>
</table>
Now, I want to replace the div on hover with this code:
<div><span>clicks:123</span><br><span>money:7890</span></div>
and change it back to its original state on hover out.
This is what I have tried:
var temp_html;
$("#table2 tr").find('div').hover(function(){
var temp_html = $(this).clone().wrap('<div>').parent().html();
$(this).replaceWith("<div><span>clicks:123</span><br><span>money:7890</span></div>");
}, function() {
$(this).replaceWith(temp_html);
});
Can someone help me identify where I am going wrong?