دسته ‌بندی آموزش ها
برچسب ها

مدیریت رویدادهای MouseEnter و MouseLeave برای چند عنصر در محیط Localhost

handle mouse events multiple elements localhost
20 آبان 1403

وقتی صحبت از توسعه وب و برنامه‌نویسی تحت وب می‌شود، یکی از مواردی که به بررسی آن می‌پردازیم مدیریت رویدادها در مرورگرهاست. در محیط‌های توسعه‌ای نظیر Localhost، یادگیری نحوه مدیریت رویدادهای کاربری می‌تواند بسیار سودمند باشد. این مقاله به بررسی مدیریت رویدادهای MouseEnter و MouseLeave برای چندین عنصر در یک صفحه وب می‌پردازد.

تصور کنید که یک صفحه وب دارید که شامل چند عنصر مختلف است و می‌خواهید رفتارهایی را به هنگام ورود و خروج نشانگر ماوس مشاهده کنید. این کار علاوه بر جذاب‌تر کردن رابط کاربری می‌تواند به کاربر کمک کند تا با تعامل بیشتری با صفحه شما مرتبط شود.

فرض کنید صفحه‌ای دارید که شامل چندین div هر کدام با رنگ خاصی است. حال می‌خواهیم وقتی نشانگر ماوس بر روی هر عنصر قرار گرفت، رنگ آن تغییر کند و به حالت اصلی خود برگردد وقتی که نشانگر ماوس خارج می‌شود.

برای دستیابی به این هدف، می‌توانیم از امکانات جاوااسکریپت بهره ببریم. در مثال زیر، کد جاوااسکریپتی برای مدیریت رویدادهای MouseEnter و MouseLeave برای چندین div آورده شده است.

نمونه کد


    <!DOCTYPE html>
    <html lang="fa">
    <head>
    <meta charset="UTF-8">
    <title>Mouse Events Example</title>
    <style>
      .box { width: 100px; height: 100px; margin: 10px; display: inline-block; }
      .box1 { background-color: red; }
      .box2 { background-color: green; }
      .box3 { background-color: blue; }
    </style>
    </head>
    <body>

    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>

    <script>
      document.querySelectorAll('.box').forEach(item => {
        item.addEventListener('mouseenter', event => {
          item.style.backgroundColor = 'yellow';
        })
        item.addEventListener('mouseleave', event => {
          const originalBg = item.classList.contains('box1') ? 'red' :
            item.classList.contains('box2') ? 'green' :
            'blue';
          item.style.backgroundColor = originalBg;
        })
      });
    </script>

    </body>
    </html>

توضیحات خط به خط کد

<!DOCTYPE html>
این خط نوع سند HTML را مشخص می‌کند.
<html lang="fa">
تعیین زبان صفحه به فارسی.
<style>
در اینجا استایل‌هایی تعریف شده‌اند که اندازه و رنگ اولیه divها را مشخص می‌کند.
<div class="box box1"></div>
هر div با یک کلاس متفاوت برای شناسایی رنگ اصلی آن مشخص شده‌ است.
document.querySelectorAll('.box').forEach(...)
استفاده از querySelectorAll برای انتخاب همه عناصر با کلاس box و افزودن رویدادها به آنها.
addEventListener('mouseenter', ...)
افزودن رویداد mouseenter به هر عنصر به منظور تغییر رنگ به yellow هنگام ورود ماوس.
addEventListener('mouseleave', ...)
افزودن رویداد mouseleave برای بازگرداندن رنگ اصلی عنصر هنگامی که ماوس از آن خارج می‌شود.

سوالات متداول

؟

چطور می‌توان رنگ عناصر را هنگام ورود و خروج ماوس تغییر داد؟

؟

آیا می‌توان رنگ اصلی عناصر را پس از خروج از حالت hover بازگرداند؟

مطالب مرتبط