Changing the Background for Bootstrap Dropdown a on Hover

Changing the background for bootstrap dropdown a on hover

Bootstrap defines a background image for the elements to override some clashes in their media queries. Remove the image to use a simple fill color.

You can redefine your hover as follows:

.dropdown-menu > li > a:hover {
    background-image: none;
    background-color: red;
}

http://jsfiddle.net/sW7Dh/4/

Remove hover background dropdown bootstrap 4

easiest way to do this is take a new class inside drop down-menu and apply css

check this fiddle, updated fiddle https://jsfiddle.net/rb87gwzj/4/ or this snippet

.dropdown-menu{  background-color: transparent;  border: transparent;  border: none;}.dropdown-menu .dropdown-item > li > a:hover {  background-image: none;    background-color: #000!important;}
.navbar {  background: none;}.dropdown-content a:hover {    background-color: transparent;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>  </button>  <a class="navbar-brand" href="index.html">    <img src="images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="Sample Image">  </a>  <div class="collapse navbar-collapse" id="navbarNav">    <ul class="navbar-nav">      <li class="nav-item active">        <a class="nav-link" href="index.html">Home</a>      </li>      <li class="nav-item active dropdown">        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">          Projects        </a>        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >        <div class="dropdown-content">                        <a class="dropdown-item" href="#html">HTML5/CSS</a>          <a class="dropdown-item" href="#python">Python</a>          <a class="dropdown-item" href="#php">PHP</a>          <a class="dropdown-item" href="#java">Java</a>          <a class="dropdown-item" href="#csharp">C#</a>  </div>        </div>      </li>    </ul>  </div></nav>

How do I change the hover background and the background on click on a Bootstrap Vue dropdown item?

Perhaps you should try this:

.dropdown-item {
  & ::v-deep .dropdown-mine {
    background-color: green;
  }
}

I am not familiar with Vue.js but I have found a similar question on Stackoverflow that gave this answer. You can read more about the ::v-deep selector here.

change bootstrap navbar dropdown menu hover color

Try this:

Remove background-image and use background-color

 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-image:none !important;
 }
 .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background-color:red;
 }

DEMO

To Change the Arrow Color use this:

<span class="caret" style="color: red;"></span>

UPDATED DEMO

How can you change the background color of an active bootstrap dropdown element?

To change the color :active when clicking on links in bootstrap, you need to make an override the background color with the required parameter !important. This parameter makes your style rule or css priority relative to the current one.

Add this to your stylesheet (or css):

.nav-item.dropdown .dropdown-item:active {
    background-color: green !important;
}

I used green as an example. But you can apply the color you want.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<style>
    :root {
        --bs-primary: brown;
    }

    .bg-primary {
        background-color: var(--bs-primary) !important;
    }

    .nav-item.dropdown .dropdown-item:active {
        background-color: green !important;
    }
</style>

<!-- Navbar: -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

How to change bootstrap 4 drop-down colors?

.dropdown {list-style: none; background: green; padding: 10px; display: inline-block;}.dropdown .nav-link {color:#fff; text-decoration: none;}.dropdown .dropdown-menu a{color: #000; text-decoration: none;}.dropdown .btn {background: green; color:#fff;}.dropdown .btn:hover {background: cyan; color:#000;}.dropdown .btn:active {background: cyan; color:#000;}.dropdown .btn:focus {background: cyan; color:#000;}.dropdown-menu .dropdown-item {display: inline-block; width: 100%; padding: 10px 5px;}.container .dropdown .dropdown-menu a:hover{  color: #fff;  background-color: #b91773;  border-color: #fff;}

<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script></head><body>
<div class="container">  <li class="nav-item dropdown">        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"          aria-expanded="false">  Dropdown link</a>        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">          <a class="dropdown-item" href="#">Action</a>          <a class="dropdown-item" href="#">Another action</a>          <a class="dropdown-item" href="#">Something else here</a>        </div>      </li></div>
</body></html>

How can i change hover in drop down menu in my bootstrap?

Try this

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

CSS

.dropdown-menu {
    background-color: black;
}

.dropdown-menu > li > a {
        color: white;
}

.dropdown-menu > li > a:hover {
    background-color: red;
    background-image: none;
}

Fiddle Demo

Expand list-item background-color on :hover of Bootstrap Dropdown

Use this:

.dropdown-menu {
    padding: 0 !important;
}
.nav li ul li:first-child a {
 border-radius: 4px 4px 0 0;
}
.nav li ul li:last-child a {
    border-radius: 0 0 4px 4px;
}

body {    background-color: blue;    padding: 100px;}
.nav {  background-color: #EDEDED;  width: 200px;}
    .nav li ul li a:hover {        background-color: red;        color: #FFF;      }        .nav ul li a {      padding: 10px 15px;    }.dropdown-menu {  padding: 0 !important;}      .dropdown-menu .sub-menu {    left: 100%;    position: absolute;    top: 0;    visibility: hidden;    margin-top: -1px;}
.dropdown-menu li:hover .sub-menu {    visibility: visible;}
.dropdown:hover .dropdown-menu {    display: block;    top: -10px;    margin-right: -25%;}.nav li ul li:first-child a {    border-radius: 4px 4px 0 0;}.nav li ul li:last-child a {    border-radius: 0 0 4px 4px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav">
    <li class="dropdown" id="collection">        <a class="dropdown-toggle" data-toggle="dropdown" href="#">            <span class="fa fa-bars"></span>            Items        </a>
        <ul class="dropdown-menu dropdown-menu-right sub-menu">            <li>                <a href="#">Item</a>            </li>            <li>                <a href="#">Item</a>            </li>            <li>                <a href="#">Item</a>            </li>            <li>                <a href="#">Item</a>            </li>        </ul>    </li></ul>

How to change background color of an option tag when hovering?

The answer is no. Currently, in CSS3 there is no support for this. Perhaps in the next version, there will be.

However, there are alternatives...

The first alternative is making a custom dropdown menu with Bootstrap 5.

That alternative would look like this:

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu li:nth-child(1) > a:hover {
  background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
  background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
  background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
  background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="wrapper">
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
    <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
      <li><a class="dropdown-item" href="#">Volvo</a></li>
      <li><a class="dropdown-item" href="#">Saab</a></li>
      <li><a class="dropdown-item" href="#">VW</a></li>
      <li><a class="dropdown-item" href="#">Audi</a></li>
    </ul>
  </div>
</div>

Changing the Background for Bootstrap Dropdown a on Hover