حل شده
باقی ماندن مقداری از رنگ جدید در حاشیه المان پس از تغییر رنگ با hover
سلام دوستان من یه navbar یا همون منو بالای سایت طراحی کردم که وقتی موس میره روی گزینه ها، رنگ پس زمینه شون تغییر میکنه اما جای رنگ جدید پس از کنار آوردن موس از روی المانها همچنان در بعضی از حاشیه ها باقی میمونه!!! کسی میدونه چطوری میشه این مشکل رو برطرف کرد؟
ثبت پرسش جدید
پاسخ‌ها
7
بدیش اینه که درست نمیشه امتحانش کرد.
حالا این رو امتحان کن:
<style>
.navbar-nav .nav-item {
border-radius: 3px;
transition: all 0.5s;
}
.navbar-nav .nav-item:hover {
background-color: lawngreen;
}
</style>سلام
کدهاتون رو قرار بدین.
@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="https://roocket.ir/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>
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
اینجوری بخش style رو مقداردهی کن:
<style>
.navbar-nav li {
border-radius: 5%;
transition: all 0.5s;
}
.navbar-nav li:hover {
background-color: lawngreen;
}
</style>@milad این کارو هم انجام دادم ولی بازم درست نشد
@milad درست شد ممنون 🙏
خیلی هم خوب، سرزنده باشی 👍