The following happens in Safari Version 7.0.1 and IE8.
Steps to reproduce the problem:
$(function() {
$("td").on("click", function() {
$("#menu")
.clone()
.one("click", function() {
// this is key to reproduce it.
$(this).closest("td").html("boo");
return false;
})
.appendTo(this)
.show();
});
});p {
font-size: 11px;
padding: 10px;
}
table {
width: 100%;
padding: 10px;
border: 1px solid black;
}
table td {
border: 1px solid black;
cursor: pointer;
}
tr:hover td {
background-color: lightblue;
}
#menu {
position: absolute;
display: none;
background-color: Gray;
width: 100px;
}
#menu li:hover {
background-color: LightGray;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on a cell ('hi') to open a popup menu. Click on a list item in the menu to close the menu. The hover effect on the table row will remain until you hover over it again. Even dev tools will not report the row as being in a :hover state, but the hover style remains!</p>
<table>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
<tr>
<td>hi</td><td>hi</td>
</tr>
</table>
<div id="menu">
test
<ul>
<li>bye</li>
<li>bye</li>
<li>bye</li>
<li>bye</li>
<li>bye</li>
<li>bye</li>
</ul>
</div>Problem: The row's hover state remains after dismissing the popup menu, and it will not go away no matter where the mouse is, until you hover over it again.
What is the expected behavior? The row's hover state should go away after dismissing the popup menu.
Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.
This was an interesting issue to solve. And while the solution is a bit hacky, it works. After setting the HTML to "boo" we clone the entire row, insert it, and remove the old one:
$(function() {
$("table").on("click", "td", function() {
$("#menu")
.clone()
.one("click", function() {
var $td = $(this).closest("td"),
$tr = $td.parent();
$td.html("boo");
$tr.clone(/* true */).insertAfter($tr);
$tr.remove();
return false;
})
.appendTo(this)
.show();
});
});