محرر ويب أونلاين

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            padding: 20px;
            height: 100px;
            line-height: 30px;
            background: bisque;
        }
    </style>
</head>
<body>
    <h1>Javascript Check If Mouse Is Over/Out the element</h1>
    <div id="myDiv">Move the mouse of this box.</div>

    <script>
        // myDiv في متغير إسمه myDiv يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let myDiv = document.querySelector('#myDiv');

        // myDiv للعنصر الذي يمثله المتغير mouseover هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
        myDiv.addEventListener('mouseover', () => {
            // سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس فوق العنصر الذي يمثله المتغير
            myDiv.innerHTML = 'Mouse pointer is over me.';
        });

        // myDiv للعنصر الذي يمثله المتغير mouseout هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه عندما يصبح الماوس فوق العنصر
        myDiv.addEventListener('mouseout', () => {
            // سيتم عرض هذه الجملة فيه myDiv عندما يكون مؤشر الماوس خارج العنصر الذي يمثله المتغير
            myDiv.innerHTML = 'Mouse pointer is not over me.';
        });
	</script>
</body>
</html>