CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
sachin_ware
sachin_ware

Reputation: 1561

How to remove default bootstrap effects applied on dropdown?

I am trying to create the a dropdown which contains some text items.When i have created dropdown and moving mouse on the options their background gets blue color and some transition effects.I think these effects are coming from bootstrap css.But i want to remove those effects and apply my effects. How should i apply my own hover effects using css . Follwing is my dropdown code:

<div id="classifieds_div" >
    <div class="dropdown">
    <!--Link or button to toggle dropdown -->
        <a  id="classifieds"  data-toggle="dropdown"
            style="" data-g-event="Maia: Header" data-g-action="Maia: Sub Header" data-g-label="Classifieds">
            <center style="margin-top:8px;"><big>Classifieds <i class="icon-chevron-down" style="font-size:20px"></i></big></center> 
        </a>
        <ul class="dropdown-menu" id="clsfd_drdown" role="menu" aria-labelledby="dropdownMenu1"  style="position:relative;">
            <li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 1</a></li>
            <li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 2</a></li>
            <li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 3</a></li>
            <li role="presentation"><a class="cls" role="menuitem" tabindex="-1" href="#">Caragori 4</a></li>
        </ul>
    </div>
</div>

and following css does not work:

.cls:hover{
    background:#eee;
    transition: 0.3s;
    -moz-transition:0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
}

Following are hover effects: enter image description here

Upvotes: 0

Views: 1508

Answers (2)

wentz
wentz

Reputation: 700

Using !important tags is generally not recommended. What you want to do in this case is to add more specificity. If you only want it applied to #classifieds_div you can use the following code, otherwise replace #classifieds_div with .dropdown.

#classifieds_div .cls:hover{
    background:#eee;
    transition: 0.3s;
    -moz-transition:0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
}

Edit: modified fiddle with this code

Upvotes: 0

Snake Eyes
Snake Eyes

Reputation: 16764

Modify CSS side:

.cls:hover{
                background:#eee !important;
                transition: 0.3s !important;
                    -moz-transition:0.3s !important;
                    -webkit-transition: 0.3s !important;
                    -o-transition: 0.3s !important;
            }

A fiddle example.

Upvotes: 2

Related Questions