onmouseover প্রোপার্টি দিয়ে ওয়েব পেজের ব্যাকগ্রাউন্ড রঙ পরিবর্তন

onmouseover প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড রঙ পরিবর্তন

onmouseover ইভেন্ট হ্যান্ডলার প্রোপার্টি Mouser পয়েন্টার একটি এলিমেন্টের ওপর নেওয়া হলে একটি স্ক্রিপ্ট এক্সিকিউট করতে দেয়। ব্যাকগ্রাউন্ড রঙ পরিবর্তনের জন্য HTML DOM-এর document.body.style.backgroundColor প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>হেডিং দুই</h2>
  <a onmouseover="document.body.style.backgroundColor='orange'">
    রঙ পরিবর্তনের জন্য মাউস হোভার করুন।
  </a><br>
</body>
</html>

আউটপুট

টেক্সটের ওপর মাউস হোভার করলে ব্যাকগ্রাউন্ড রঙ কমলা হয়ে যাবে:

বेहতর পদ্ধতি: addEventListener

ইনলাইন ইভেন্ট হ্যান্ডলার (onmouseover="...") বর্তমানে বাধা দেয়া হয়। আধুনিক পদ্ধতি:

<!DOCTYPE html>
<html>
<body>
  <h2>হেডিং দুই</h2>
  <a id="hoverLink" href="#">রঙ পরিবর্তনের জন্য মাউস হোভার করুন।</a><br>
  <script>
    const link = document.getElementById('hoverLink');
    link.addEventListener('mouseover', () => {
      document.body.style.backgroundColor = 'orange';
    });
    // মাউস বের হলে রঙ ফিরিয়ে আনা
    link.addEventListener('mouseout', () => {
      document.body.style.backgroundColor = '';
    });
  </script>
</body>
</html>

CSS বিকল্প (জাভাস্ক্রিপ্ট ছাড়া)

সadece হোভার ইফেক্টের জন্য CSS :hover পসিউডো-ক্লাস ব্যবহার করুন — এটি পারফরম্যান্সে ভালো এবং জাভাস্ক্রিপ্ট ছাড়া কাজ করে:

<style>
  .color-change:hover {
    background-color: orange;
  }
</style>
<a class="color-change" href="#">হোভার করুন</a>

সারা পেজের ব্যাকগ্রাউন্ড পরিবর্তন (CSS-only)

<style>
  body { transition: background-color 0.3s; }
  #trigger:hover ~ body, /* এটি কাজ করবে না, sibling selector body-এ কাজ করে না */
  /* বetter: JavaScript ব্যবহার করুন */
</style>

নোট: CSS-এ প্যারেন্ট বা পূর্ববর্তী সিবলিং সিলেক্ট করার উপায় নেই, তাই পুরো বডির রঙ পরিবর্তনের জন্য JavaScript প্রয়োজন।