কম্পিউটার টিউটোরিয়াল

CSS দিয়ে মাউস হোভারে দেখা যাওয়া টুলটিপ তৈরি করুন


মাউস হোভারে দেখা যাওয়া টুলটিপ তৈরি করতে নিচের কোডটি চালাতে পারেন।.visibility প্রপার্টি ব্যবহার করুন।

উদাহরণ

লাইভ ডেমো

<!DOCTYPE html> <html>    <style>       #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }    </style>    <body>       <div id = "mytooltip">Hover the mouse over me          <p id = "mytext">My Tooltip text</p>       </div>    </body> </html>

  1. CSS দিয়ে প্যারেন্টের একমাত্র চাইল্ড হয়ে p এলিমেন্ট স্টাইল করুন

  2. CSS ব্যবহার করে এলিমেন্টের видиবিলিটি নিয়ন্ত্রণ

  3. CSS দিয়ে টুলটিপ তৈরি করার পদ্ধতি

  4. CSS দিয়ে স্টিকি (Sticky) এলিমেন্ট তৈরি