CSS হোভার:

:হোভার নির্বাচক হল উপাদান নির্বাচন করার জন্য যখন আমরা তাদের উপর মাউস নিয়ে যাই। এটি শুধুমাত্র লিঙ্কের মধ্যে সীমাবদ্ধ নয়। আমরা এটি প্রায় প্রতিটি HTML উপাদানে ব্যবহার করতে পারি। অনাদর্শিত পৃষ্ঠাগুলির লিঙ্কটিকে স্টাইল করতে, আমরা :লিঙ্ক নির্বাচক ব্যবহার করতে পারি। পরিদর্শন করা পৃষ্ঠাগুলির জন্য লিঙ্কটি স্টাইল করতে, আমরা :ভিজিটেড নির্বাচক ব্যবহার করতে পারি এবং সক্রিয় লিঙ্কগুলিকে স্টাইল করতে আমরা :সক্রিয় নির্বাচক ব্যবহার করতে পারি।

এটি CSS1 এ চালু করা হয়েছে। হোভারটি একটি কার্যকর ওয়েব ডিজাইনিং প্রোগ্রামে ব্যবহারকারীদের পছন্দ অনুযায়ী ওয়েব পৃষ্ঠাগুলি হাইলাইট করতে ব্যবহার করা যেতে পারে।

হোভার বৈশিষ্ট্য নিম্নলিখিত প্রভাব অন্তর্ভুক্ত:

Change the color of the background and font.
Modify the opacity of the image.
Text embedding.
Create image rollover effects.
Swapping of images.

দ্রষ্টব্য: হোভার কার্যকর করার জন্য, আমাদের অবশ্যই এটিকে :link এবং :visited নির্বাচকদের পরে ঘোষণা করতে হবে যদি তারা CSS সংজ্ঞায় উপস্থিত থাকে।

মূলত, হোভার প্রভাব একটি বিবৃত চিত্র/টেক্সট বা সংশ্লিষ্ট উপাদানগুলিতে অ্যানিমেট পরিবর্তনগুলি সক্ষম করতে উপাদানটির সম্পত্তির মান পরিবর্তন করে। ওয়েব পৃষ্ঠাগুলিতে হোভার উপাদানগুলির এম্বেডিং তাদের ইন্টারেক্টিভ এবং কার্যকরী করে তোলে।

সাধারণত, হোভার বৈশিষ্ট্যটি সমস্ত প্রধান ব্রাউজারগুলির সাথে সামঞ্জস্যপূর্ণ। তবে, টাচ ডিভাইসে এটি বাস্তবায়ন করা একটি চ্যালেঞ্জিং কাজ হবে। এটা দেখা যায় যে একটি সক্রিয় হোভার ফাংশন অ-সহায়ক ডিভাইসে আটকে যায়।

বাক্য গঠন:

:hover {  
  css declarations;  
}  

আসুন কিছু ইলাস্ট্রেশন ব্যবহার করে এটি বুঝতে পারি।

উদাহরণ 1: CSS ব্যবহার করে হোভারে লিঙ্কের রঙ পরিবর্তন করা

আসুন দেখি কিভাবে লিঙ্কের রঙ পরিবর্তন হয় যখন আমরা এটিতে কার্সার রাখি। এটি একটি আড়ম্বরপূর্ণ প্রভাব তৈরি করবে, এবং যখন আমরা CSS ব্যবহার করি তখন এর বাস্তবায়ন সহজ।

<html>  
<head>  
  
   <style>  
      body{  
         text-align:center;  
      }  
      a  
      {  
          color: red;  
      }  
      a:hover   
      {   
         color: green;   
      }              
      a:active  
      {  
      color: cyan;  
      }  
   </style>  
 </head>  
 </body>  
    <h1>Move your mouse on the below link to see the hover effect.</h1>  
    <a class = “link” href = https://www.javatpoint.com/css-grid>CSS Grid</a>  
 </body>  
</html>  

উদাহরণ 2: অনুচ্ছেদ, শিরোনাম এবং লিঙ্কে হোভার প্রয়োগ করুন

</html>  
</head>  
</style>  
   body{  
      text-align:center;  
   }  
p:hover, h1:hover, a:hover{  
background-color: yellow;  
}  
</style>  
</head>  
<body>  
<h1>Hello World</h1>  
<p>Welcome to the javaTpoint.</p>  
<a href=‘https://www.javatpoint.com/css-grid’>CSS Grid</a>  
</body>  
</html>  

উদাহরণ 3- ইমেজ হোভারে টেক্সট ওভারলে

এই সিএসএস কোড মাউস হভারের সময় চিত্রের পাঠ্য প্রদর্শন করে। মাউস হভারের সময় ইমেজ ওভারলে ইফেক্ট দেখি।

>  
</html>  
</head>  
</meta name=“viewport” content=“width=device-width, initial-scale=1”>  
</style>  
   body{  
      text-align:center;  
   }  
* {box-sizing: border-box;}  
  
.container {  
  position: relative;  
  width: 50%;  
  max-width: 300px;  
}  
  
.image {  
  display: block;  
  width: 100%;  
  height: auto;  
}  
  
.overlay {  
  position: absolute;   
  bottom: 0;   
  background: rgba(0, 0, 0, 0.2);   
  width: 100%;  
  opacity:0;   
  transition: .9s ease;  
  font-size: 25px;  
  padding: 20px;  
}  
  
.container:hover .overlay {  
  opacity: 1.5;  
}  
</style>  
</head>  
<body>  
  
<h1>Image Overlay Title Effect</h1>  
<h2>Move your mouse over the image to see the effect.</h2>  
  
<center>  
<div class=“container”>  
      <img src=“jtp.png” class=“image”>  
      <div class=“overlay”>Welcome to javaTpoint.com</div>  
</div> </center>  
  
  
</body>  
</html>  

CSS hover

CSS হোভার:

বাক্য গঠন:

Leave a Comment Cancel Reply