html5 onmouout怎么使用
onmouout:當鼠標指針移出圖片時運行腳本;
注意: onmouout 屬性不能使用于以下元素: <ba>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。
有一個簡短的代碼:
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmoumove="bigImg(this)" onmouout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>當用戶將鼠標移動到圖片時觸發 bigImg() 函數。該函數使圖片變大。</p>
<p>當用戶將鼠標移開時觸發normalImg() 函數。該函數使圖片變回原來大寫。</p>
</body>
</html>
html5 onmouout怎么使用
首先要知道onmouout的定義:onmouout 屬性在鼠標指針移動到元素外時觸發,也就是說當電腦鼠標移動到onmouout所引用的屬性之外時,就會觸發
語法使用的定義如下:
<element onmouout="script">
注意事項:所有主流瀏覽器都支持 onmouout 屬性。同時onmouout 屬性不適用以下元素:<ba>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
JavaScript OnMouOut事件
javascript onmouover和onmouout事件
onmouover和onmouout鼠標移入移出時觸發的事件:
onmouover 用戶鼠標移入元素時觸發的事件。并執行onmouover調用的函數。
onmouout 用戶鼠標移開元素時觸發的事件。并執行onmouout調用的函數。
onmouover和onmouout 這兩個事件在javascript中較常用。
下面通過一個示例更深入了解這兩個事件的使用:
示例:鼠標移入時,改變字體的背景色,移出時,還原默認的背景色。
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8" />
<title>鼠標移入時,改變字體的背景色,移出時,還原默認的背景色。</title>
<style>
.xuexi{width:200px;height:120px;background:#abcdef;border:1px solid green;}
</style>
<script>
function aixuexi(){
var woaixuexi=document.getElementById("woaixuexi");
woaixuexi.style.background="yellowgreen";
}
function xuexi(){
var xuexi=document.getElementById("woaixuexi");
xuexi.style.background="#abcdef";
}
</script>
</head>
<body>
<div id="woaixuexi" onmouover="aixuexi();" onmouout="xuexi();" class="xuexi"></div>
</body>
</html>
JS中onmouout onmouleave究竟有何區別?
我遇到的一個最明顯的區別就是onmouout是指離開指定元素,而onmouleave是離開指定元素的范圍(區域),如下代碼你可以嘗試切換事件,看看有效果
這只是我在實際應用當中偶遇到的不同,可能還會有其他的區別。