CSS দিয়ে হোভারে এলিমেন্ট প্রদর্শন করার পদ্ধতি

উদাহরণ

নিচের কোডটি CSS ব্যবহার করে হোভার করলে এলিমেন্ট প্রদর্শন করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 20px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.hiddenText {
    display: none;
}
.hoverDiv:hover + .hiddenText {
    display: block;
    color: rgb(71, 0, 65);
    font-size: 22px;
    font-weight: bold;
}
</style>
</head>
<body>
<h1>Display an Element on Hover Example</h1>
<div class="hoverDiv" style="font-size: 18px;">Hover over me.</div>
<div class="hiddenText">This text is shown by hovering on the above div</div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

"Hover over me" টেক্সটের উপরে হোভার করলে: