جواد پاکدل
4 سال پیش
توسط جواد پاکدل
مطرح شد
باقی ماندن مقداری از رنگ جدید در حاشیه المان پس از تغییر رنگ با hover
سلام دوستان من یه navbar یا همون منو بالای سایت طراحی کردم که وقتی موس میره روی گزینه ها، رنگ پس زمینه شون تغییر میکنه اما جای رنگ جدید پس از کنار آوردن موس از روی المانها همچنان در بعضی از حاشیه ها باقی میمونه!!! کسی میدونه چطوری میشه این مشکل رو برطرف کرد؟
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
![user-avatar]()
![user-avatar]()
![user-avatar]()
گزارش تخلف
کپی کردن
0
بدیش اینه که درست نمیشه امتحانش کرد.
حالا این رو امتحان کن:
<style>
.navbar-nav .nav-item {
border-radius: 3px;
transition: all 0.5s;
}
.navbar-nav .nav-item:hover {
background-color: lawngreen;
}
</style>
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
1
@milad سلام ممنون از پاسختون، برنامه رو با بوت استرپ نوشتم. فقط برای اینکه متوجه این موضوع بشین، باید چندین بار ماوس رو ببرین رو گزینه ها و بیارین کنار و مکث کنین
کدها:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="BS4.3.1/css/bootstrap.min.css">
<style>
nav a {
border-radius: 5%;
transition: all 0.5s;
}
nav a:hover {
background-color: lawngreen;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md fixed-top" style="background-color: #555">
<a href="#" class="navbar-brand">Company</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#demo">
<span class="navbar-toggler-icon"></span>
</button>
<div id="demo" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Product</a>
<div class="dropdown-menu bg-warning">
<a href="#" class="dropdown-item">Tablet</a>
<a href="#" class="dropdown-item">Mobile</a>
<a href="#" class="dropdown-item">Laptop</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="BS4.3.1/js/jquery-3.4.1.min.js"></script>
<script src="BS4.3.1/js/popper.min.js"></script>
<script src="BS4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
</body></html>
گزارش تخلف
کپی کردن
0
اینجوری بخش style رو مقداردهی کن:
<style>
.navbar-nav li {
border-radius: 5%;
transition: all 0.5s;
}
.navbar-nav li:hover {
background-color: lawngreen;
}
</style>
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
0
بدیش اینه که درست نمیشه امتحانش کرد.
حالا این رو امتحان کن:
<style>
.navbar-nav .nav-item {
border-radius: 3px;
transition: all 0.5s;
}
.navbar-nav .nav-item:hover {
background-color: lawngreen;
}
</style>
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
0