[jQuery DEV] selektor :hover w Operze
- czwartek 1 Marzec 2012
- Zostaw komentarz
Jeżeli chcemy użyć selektora :hover w swoim kodzie źródłowym JavaScript-u, musimy zważyć na jeden problem: W Operze to po prostu nie działa.
Przykład:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 100px;height: 100px; background: green;"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("div").click(function(){
if($("div").is(":hover"))
$("div").css("background", "red");
});
</script>
</body>
</html>
W przeglądarce Opera 11.61 powoduje to wywołanie błędu:
Uncaught exception: Syntax error, unrecognized expression: hover
Nasze szybkie rozwiązanie tego problemu wygląda następująco:
<script type="text/javascript">
//każdy element po najechaniu będzie miał zmienną is_hover=true a po opuszczeniu elementu is_hover=false
$('*').hover(function(){$(this).data('is_hover', true)},function(){$(this).data('is_hover', false)});
//sprawdzamy działanie:
$("div").click(function(){
if($("div").data("is_hover"))
$("div").css("background", "red");
});
</script>