هاور کردن روی یک دکمه
سلام من می خواستم بدونم چطوری میشه با استفاده از css وقتی روی یک button هاور میشه یک لیست نشون بده
اگه می تونید کمک کنید
پاسخ‌ها
4
سلام دوست عزیز
سه حالت داره این کار اونم اینطوری هست که فرض بگیریم لیست مورد نظر فرزند button باشه ، یا siblings و یا دقیقا بعد از button قرار داده شده باشه
با css چیز دیگه ای به ذهنم نمیرسه برای hover الان
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my_button + ul {
display: none;
}
#my_button:hover + ul{
display: block;
}
</style>
</head>
<body>
<button id="my_button">my button</button>
<ul>
<li>my list</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my_button ~ ul {
display: none;
}
#my_button:hover ~ ul{
display: block;
}
</style>
</head>
<body>
<button id="my_button">button</button>
<div>random sibling not important</div>
<ul>
<li>list</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my_button > ul {
display: none;
}
#my_button:hover > ul{
display: block;
}
</style>
</head>
<body>
<button id="my_button">button
<ul>
<li>list</li>
</ul>
</button>
</body>
</html>
میگم داخل مورد سوم اصلا ul میتونه زیر مجموعه button باشه 🤔
استاندارده؟
@salar.mohammad2013
@ossvahid
من کلی توضیحش دادم چون بعدا ممکنه جای دیگه استفاده کنه و موضوع دکمه نباشه جیز دیگه باشه ( ul های تو در تو ) ، خواستم قابلیتش رو بفهمه
ولی میتونه button رو relative و لیست داخلش رو absolute کنه و مشکل ظاهر رو حل کنه
موضوع امکان نمایش لیست بود که شدنی هست با روش
پرفورمنس با خودشه 🤣😂🤣😂🤣😂
چون کلا من خودم برا نمایش یک لیست دکمه قرار نمیدم که بعد بخواد با hover کاری کنه
دکمه فقط برا فرم و این چیزا میزارم که واقعا کاربر بخواد کلیک کنه دیگه 😂
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
