jQuery ??? ??? ??
1. hover(over, out)
hover ??? ?? ?? ??????? mouseover ? mouseout ?? ??? ?????. ?? ?? ???.
? ?? div(??? ??)? ????. ???? div(??? ??)? ???? ????. HTML ??? ??? ????.
<div class="outer" id="outer1"> Outer 1 <div class="inner" id="inner1">Inner 1</div> </div> <div class="outer" id="outer2"> Outer 2 <div class="inner" id="inner2">Inner 2</div> </div> <div id="console"> </div>
?? ???? ??????.
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
Outer1 Outer1? ??? ???? ???? ??? ? ??? ?? ? ????? ???? ??????. ??? ???? ???? ?? Outer1 ??? ????? mouseout ???? ????? ?? ? ? ????.
? ??? ??? ??? ?? ??? ??? ???? ???? ??? ????. Outer1 ???? ???? ??? ?? ??????. Outer2? Hover() ??? ???? ?? ??? ????.
??? ??? ??? ??? ? "mouseenter"?? ?? ? "mouseleave"???. "mouseover" ? "mouseleave" ???.
??? ??? ????? ?? ??? ?? ? ?? ??? ??? ?? ??? ????. mouseout ???? ?? ??? ???? ???? ???? ??? ???? ??? ? ?? ?? ??? ???? ??? ?? ?? mouseout ???? ???? ??? ????. hover() ??? ? ??? ?? ?? ??????.
2. ,... )
?? ??? ?? ??? ??? ??? ??? ??? ? ??? ?? ??? ??? ??? ????? ?????.
???? ??? ???? ??? ? ?? ??? ?????, ??? ??? ?? ???? ??? ? ?? ??? ?????, ? ?? ??? ??? ??? ???? ?? ??????. ?? ??? ??? ??? ??? ?? ??? ??? ?????.
unbind("??")? ???? ??? ? ????.
?? ???? ?? ??? ???? ??? ?????.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>toggle example</title>
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function()
{
$("li").toggle( function()
{
$(this).css({ "list-style-type": "disc", "color": "blue" });
}, function()
{
$(this).css({ "list-style-type": "square", "color": "red" });
}, function()
{
$(this).css({ "list-style-type": "none", "color": "" });
}
);
}) </script></head><body>
<ul>
<li style="cursor:pointer">click me</li>
</ul>
</body>
</html>
????? "click me"? ??? ??? ?? ??? ??? ??? ?????.
