mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 06:50:23 +00:00
115 lines
No EOL
4.7 KiB
HTML
115 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>.mouseover()</h1>
|
|
|
|
</div>
|
|
<div data-role="content" data-theme="c" id="mouseover1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.mouseover( handler(eventObject) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.</p>
|
|
<ul class="signatures">
|
|
<li class="signature" id="mouseover-handlereventObject">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.mouseover( handler(eventObject) )</h4>
|
|
<p class="arguement"><strong>handler(eventObject)</strong>A function to execute each time the event is triggered.</p>
|
|
</li>
|
|
<li class="signature" id="mouseover"><h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.mouseover()</h4></li>
|
|
</ul>
|
|
<div class="longdesc">
|
|
<p>This method is a shortcut for <code>.bind('mouseover', handler)</code> in the first variation, and <code>.trigger('mouseover')</code> in the second.</p>
|
|
<p>The <code>mouseover</code> event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.</p>
|
|
<p>For example, consider the HTML:</p>
|
|
<pre><div id="outer">
|
|
Outer
|
|
<div id="inner">
|
|
Inner
|
|
</div>
|
|
</div>
|
|
<div id="other">
|
|
Trigger the handler
|
|
</div>
|
|
<div id="log"></div></pre>
|
|
<p class="image"><img src="http://api.jquery.com/images/0042_05_06.png" alt=""></p>
|
|
<p>The event handler can be bound to any element:</p>
|
|
<pre>$('#outer').mouseover(function() {
|
|
$('#log').append('<div>Handler for .mouseover() called.</div>');
|
|
});</pre>
|
|
<p>Now when the mouse pointer moves over the <span class="output">Outer</span> <code><div></code>, the message is appended to <code><div id="log"></code>. We can also trigger the event when another element is clicked:</p>
|
|
<pre>$('#other').click(function() {
|
|
$('#outer').mouseover();
|
|
});</pre>
|
|
<p>After this code executes, clicks on <span class="output">Trigger the handler</span> will also append the message.</p>
|
|
<p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the <span class="output">Inner</span> element in this example, a <code>mouseover</code> event will be sent to that, then trickle up to <span class="output">Outer</span>. This can trigger our bound <code>mouseover</code> handler at inopportune times. See the discussion for <code>.mouseenter()</code> for a useful alternative.</p>
|
|
</div>
|
|
<h3>Example:</h3>
|
|
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
|
<h4><span class="desc">Show the number of times mouseover and mouseenter events are triggered.
|
|
mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.</span></h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div.out {
|
|
width:40%;
|
|
height:120px;
|
|
margin:0 15px;
|
|
background-color:#D6EDFC;
|
|
float:left;
|
|
}
|
|
div.in {
|
|
width:60%;
|
|
height:60%;
|
|
background-color:#FFCC00;
|
|
margin:10px auto;
|
|
}
|
|
p {
|
|
line-height:1em;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>
|
|
|
|
<div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>
|
|
|
|
|
|
<script>
|
|
var i = 0;
|
|
$("div.overout").mouseover(function(){
|
|
$("p:first",this).text("mouse over");
|
|
$("p:last",this).text(++i);
|
|
}).mouseout(function(){
|
|
$("p:first",this).text("mouse out");
|
|
});
|
|
|
|
var n = 0;
|
|
$("div.enterleave").bind("mouseenter",function(){
|
|
$("p:first",this).text("mouse enter");
|
|
$("p:last",this).text(++n);
|
|
}).bind("mouseleave",function(){
|
|
$("p:first",this).text("mouse leave");
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |