Шаги, чтобы воспроизвести проблему: < /p>
$(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();
});
});< /code>
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;
}< /code>
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!
hihi
hihi
hihi
hihi
hihi
hihi
hihi
hihi
hihi
hihi
hihi
hihi
test
- bye
- bye
- bye
- bye
- bye
- bye
< /div>
< /div>
< /p>
Проблема:
Состояние парящего ряда остается после увольнения всплывающего меню, и он не исчезнет, независимо от того, где мышь, пока вы снова не зависят от него. Меню. Я был бы в порядке с каким -то ручным способом «не взволнован» состоянием CSS Hover.
Подробнее здесь: https://stackoverflow.com/questions/214 ... r-hovering
Мобильная версия