پاسخ داده شد
چگونه می توانیم در فرم خود یک کمبوباکس داشته باشیم به نحوی که زمانیکه کاربر موس خود را روی آن برد آیتم های کمبوباکس نمایش داده شود؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ عالی
برای اینکار می توانیم از تکنیک hoover در CSS استفاده کنیم.
<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: green;}
div a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;
}
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#">Course</a>
<ul>
<li><a href="#">React</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">Bootstrrap</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
در خط
ul li:hover ul {display: block;}گفتیم که زمانیکه موس روی عبارت Course قرار گرفت آیتم های کمبوباکس یعنی React و Spring و Bootstrap نمایش داده شود.
همچنین در قسمت زیر
ul li ul {
position: absolute;
width: 200px;
display: none;
}display را برابر none قرار دادیم به این معنی که عبارتهای React و Spring و Bootstrap در حالت عادی نمایش داده نشوند.
- فرشته حقیقی 4 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ شما
