آموزش hover در css
در این بخش از آموزش css به سراغ آموزش hover در css می رویم و با ذکر چندین مثال زیبا ، این مبحث را یاد می گیریم. در تاپ سایت 98 می توانید آموزش های زیادی را بصورت رایگان استفاده نمایید.
هاور کردن لینک
هاور کردن (hover) یعنی وقتی با موس روی لینک یا عنصری قرار می گیرید آن عنصر تغییر کند. در مثال زیر هاور کردن لینک را مشاهده می کنید.
وقتی با موس روی لینک ، hover می کنید زیر متن خط کشیده می شود و رنگ پس زمینه تغییر می کند.
برای اجرای کد می توانید آن را در یک فایل html ذخیره کرده و اجرا نمایید.
<html>
<head>
<style>
a{
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: red;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/">topsite98.com</a>
</body>
</html>
ساخت یک hover زیبا برای دکمه
در قسمت پایین یک دکمه ایجاد می کنیم و ساخت یک hover زیبا برای دکمه را مشاهده می کنید.
وقتی با موس روی دکمه قرار می گیرید آن دکمه تغییر می کند.
در مثال زیر ابتدا یک لینک قرار دادیم و سپس در تگ style شروع به نوشتن css کردیم.
در تگ a چندین کد را قرار دادیم رنگ پس زمینه ، رنگ متن ، کادر ، اندازه فونت ، padding و غیره . با این سی اس اس دکمه را ایجاد کردیم .
سپس با a:hover برای هاور کدنویسی کردیم. با هاور کردن رنگ پس زمینه تغییر می کند و گوشه های دکمه نیز تغییر می کند و گرد می شود.
<html>
<head>
<style>
a{
background-color:#a4c400;
border: 1px solid #444;
color: #fff;
padding: 14px 25px;
text-align: center;
font-size: 16px;
text-decoration: none;
}
a:hover{
background-color: #60a917;
border-radius: 9px;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/">topsite98.com</a>
</body>
</html>
هاور تصویر
در این بخش با هاور تصویر نیز آشنا می شویم. اگر بر روی یک عکس یا تصویر با موس قرار بگیریم یک عکس تغییر می کند. مثلا کادری دور عکس بیفتد.
در مثال زیر ابتدا یک تصویر را قرار دادیم و آن را در بین تگ a قرار دادیم.
سپس در تگ style شروع به نوشتن سی اس اس کردیم. با هاور کردن عکس یا تصویر کادری دور عکس مشاهده خواهید کرد.
<html>
<head>
<style>
a img{
border: 8px solid #fff;
}
a img:hover{
border: 8px solid #111;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/"><img src="https://topsite98.com/public/assets/images/article/frelancer999dfffggs.jpg"></a>
</body>
</html>
تغییر عکس با هاور کردن
در مثال زیر یک عکس را قرار داده ایم و سپس با هاور کردن (hover) آن عکس به صورت بیضی شکل در می آید.
تصویر با هاور کردن دستور border-radius آن اجرا می شود و گوشه های آن گرد می شود.
<html>
<head>
<style>
a img:hover{
border-radius: 50%;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/"><img src="https://topsite98.com/public/assets/images/article/frelancer999dfffggs.jpg"></a>
</body>
</html>
امیدواریم از این آموزش لذت برده باشید .
منبع: تاپ سایت 98
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
nima
2020-07-02 20:23:31
سلام / من هاور و به یه بنر دارم با همین کدهای شما / و با ماژول اچ تی ام ال سفارشی جوملا تو قالب گذاشتم / هاور رو بنر درست عمل می کنه فقط مشکل اینه که فقط یر روی بنر اعمال نمی شه / بلکه روی تمامی عکس های سایت اعمال می شه / چیکار کنم که فقط رو بنر اعمال بشه ؟ / ممنون
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید