رویداد mouseover در جاوااسکریپت (رویداد سوم)

توضیح:

زمانیکه نشانگر موس بر روی المنت و فرزندان آن جابجا شود رویداد آن فراخوانی می شود. این رویداد بهمراه رویداد onmouseout استفاده می شود.

نحوه نوشتن:

در حالت خصوصیت تگ HTML:

<element onmouseover="myScript">

1	<element onmouseover="myScript">

در داخل جاوااسکریپت:

object.onmouseover = function(){myScript};

1	object.onmouseover = function(){myScript};

در قالب متد addEventListener:

object.addEventListener("mouseover", myScript);

1	object.addEventListener("mouseover", myScript);

تگ های پشتیبان کننده:

همه تگ ها بغیر از
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

1 2	همه تگ ها بغیر از <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

نسخه پشتیبانی مرورگرها:

مرورگر Chrome	مرورگر Firefox	مرورگر Edge	مرورگر Safari	مرورگر Opera
همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها	همه نسخه ها

حالت Bubbles:

بله

حالت Cancelable:

بله

مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="smiley.gif" onmouseover="myfunction(this)" onmouseout="myfunction2(this)">
<script>
    function myfunction(x){
        x.style.width = "64px";
        x.style.height = "64px";
    }

    function myfunction2(x){
        x.style.width = "32px";
        x.style.height = "32px";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

function myfunction(x){

x.style.width = "64px";

x.style.height = "64px";

}

function myfunction2(x){

x.style.width = "32px";

x.style.height = "32px";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="smiley.gif">
<script>
    document.querySelector("img").onmouseover = myfunction;
    document.querySelector("img").onmouseleave = myfunction2;

    function myfunction(){
        document.querySelector("img").style.width = "64px";
        document.querySelector("img").style.height = "64px";
    }

    function myfunction2(){
        document.querySelector("img").style.width = "32px";
        document.querySelector("img").style.height = "32px";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

document.querySelector("img").onmouseover = myfunction;

document.querySelector("img").onmouseleave = myfunction2;

function myfunction(){

document.querySelector("img").style.width = "64px";

document.querySelector("img").style.height = "64px";

}

function myfunction2(){

document.querySelector("img").style.width = "32px";

document.querySelector("img").style.height = "32px";

}

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="smiley.gif">
<script>
    document.querySelector("img").addEventListener('mouseover', myfunction);
    document.querySelector("img").addEventListener('mouseleave', myfunction2);

    function myfunction(){
        document.querySelector("img").style.width = "64px";
        document.querySelector("img").style.height = "64px";
    }

    function myfunction2(){
        document.querySelector("img").style.width = "32px";
        document.querySelector("img").style.height = "32px";
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

document.querySelector("img").addEventListener('mouseover', myfunction);

document.querySelector("img").addEventListener('mouseleave', myfunction2);

function myfunction(){

document.querySelector("img").style.width = "64px";

document.querySelector("img").style.height = "64px";

}

function myfunction2(){

document.querySelector("img").style.width = "32px";

document.querySelector("img").style.height = "32px";

}

</script>

</body>

</html>

کلمات کلیدی را وارد نمایید

رویداد mouseover در جاوااسکریپت (رویداد سوم)

آموزش رویدادها در جاوااسکریپت

توضیح:

نحوه نوشتن:

تگ های پشتیبان کننده:

نسخه پشتیبانی مرورگرها:

حالت Bubbles:

حالت Cancelable:

مثال:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش رویدادها در جاوااسکریپت

دسترسی سریع

کلمات کلیدی را وارد نمایید

رویداد mouseover در جاوااسکریپت (رویداد سوم)

آموزش رویدادها در جاوااسکریپت

توضیح:

نحوه نوشتن:

تگ های پشتیبان کننده:

نسخه پشتیبانی مرورگرها:

حالت Bubbles:

حالت Cancelable:

مثال:

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

گواهینامه دوره آموزش جاوااسکریپت

آموزش رویدادها در جاوااسکریپت

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب