جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
جواد پاکدل
3 سال پیش توسط جواد پاکدل مطرح شد
7 پاسخ

باقی ماندن مقداری از رنگ جدید در حاشیه المان پس از تغییر رنگ با hover

سلام دوستان من یه navbar یا همون منو بالای سایت طراحی کردم که وقتی موس میره روی گزینه ها، رنگ پس زمینه شون تغییر میکنه اما جای رنگ جدید پس از کنار آوردن موس از روی المانها همچنان در بعضی از حاشیه ها باقی میمونه!!! کسی میدونه چطوری میشه این مشکل رو برطرف کرد؟


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

بدیش اینه که درست نمیشه امتحانش کرد.
حالا این رو امتحان کن:

  <style>
    .navbar-nav .nav-item {
        border-radius: 3px;
        transition: all 0.5s;
    }
    .navbar-nav .nav-item:hover {
    background-color: lawngreen;
}
</style>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

سلام
کدهاتون رو قرار بدین.


جواد پاکدل
تخصص : Front-End
@JavadPakdel 3 سال پیش آپدیت شد
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>


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

اینجوری بخش style رو مقداردهی کن:

<style>
    .navbar-nav li {
        border-radius: 5%;
        transition: all 0.5s;
    }
    .navbar-nav li:hover {
    background-color: lawngreen;
}
</style>

جواد پاکدل
تخصص : Front-End
@JavadPakdel 3 سال پیش مطرح شد
0

@milad این کارو هم انجام دادم ولی بازم درست نشد


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

بدیش اینه که درست نمیشه امتحانش کرد.
حالا این رو امتحان کن:

  <style>
    .navbar-nav .nav-item {
        border-radius: 3px;
        transition: all 0.5s;
    }
    .navbar-nav .nav-item:hover {
    background-color: lawngreen;
}
</style>

جواد پاکدل
تخصص : Front-End
@JavadPakdel 3 سال پیش مطرح شد
0

@milad درست شد ممنون 🙏


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

خیلی هم خوب، سرزنده باشی 👍


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام