نشان ندادن عنصر بعد از هاور
0
سلام و عرض خسته نباشید.
من قطعه کد زیر رو زدم ولی وقتی روی div هاور میشه چیزی نشون داده نمیشه.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.show{
background-color: deeppink;
margin: auto;
padding: 50px;
width: min-content;
white-space: nowrap;
color: white;
}
ul,li{
margin: 0;
padding: 0;
}
li{
display: inline-block;
}
li a{
background-color: chocolate;
padding: 10px;
}
.nav{
background-color: chartreuse;
padding: 10px;
display: none;
}
.show:hover .nav{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">قورمه‌سبزی</a></li>
<li><a href="">پونه</a></li>
<li><a href="">نعنا</a></li>
<li><a href="">پیاز</a></li>
<li><a href="">آبگوشت</a></li>
</ul>
<div class="show">هاور کنید</div>
</body>
</html>از طرفی در اینترنت سرچ کردم بعضی بعضی از سودو کد ها مانند کد زیر داخلشون از + استفاده شده بود و بعد حذف + از کار میوفتادن میخواستم بدون علت این موضوع هم چیه؟
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#hidden{display:none;}
#show:hover + #hidden{display:block;}
</style>
</head>
<body>
<a href="#" id="show">show</a>
<div id="hidden">here i am</div>
</body>
</html>متشکرم
2
حذف شده
سلام
اول اینکه شما باید ul با کلاس nav رو بعد از div قرار بدین
بعدش در قسمت استایل هاتون از show:hover + .nav استفاده کنید
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.show{
background-color: deeppink;
margin: auto;
padding: 50px;
width: min-content;
white-space: nowrap;
color: white;
}
ul,li{
margin: 0;
padding: 0;
}
li{
display: inline-block;
}
li a{
background-color: chocolate;
padding: 10px;
}
.nav{
background-color: chartreuse;
padding: 10px;
display: none;
}
.show:hover + .nav{
display: block;
}
</style>
</head>
<body>
<div class="show">هاور کنید</div>
<ul class="nav">
<li><a href="">قورمه‌سبزی</a></li>
<li><a href="">پونه</a></li>
<li><a href="">نعنا</a></li>
<li><a href="">پیاز</a></li>
<li><a href="">آبگوشت</a></li>
</ul>
</body>
</html>
1
حذف شده
شما باید از اتربیوت سلکتور ها استفاده کنید..نحوه معرفی کلاس nav ک نوشتید اشتباس ب این صورت ک شما نوشتین یعنی کلاس nav فرزند کلاس show..در حالیکه اینطور نیست و این دو کلاس ب نوعی خواهر/برادر هم محسوب میشوند و از + یا ~ باید استفاده کنید..برای اطلاعات بیشتر درمورد انواع سلکتور های css مطالعه کنین
برای پاسخ دادن به این سوال شما باید در دوره عضو باشید .