0

我正在尝试创建一个包含一些文本项的下拉菜单。当我创建下拉菜单并在选项上移动鼠标时，它们的背景会变为蓝色和一些过渡效果。我认为这些效果来自引导 css。但我想删除那些效果并应用我的效果。我应该如何使用 css 应用我自己的悬停效果。以下是我的下拉代码：

<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>

并且以下CSS不起作用：

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

以下是悬停效果： 在此处输入图像描述

4

2 回答 2

2

修改 CSS 端：

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

一个小提琴的例子。

于 2013-10-17T14:31:48.150 回答
0

通常不建议使用 !important 标签。在这种情况下，您想要做的是增加更多的特异性。如果您只想将其应用于#classifieds_div，您可以使用以下代码，否则将#classifieds_div 替换为.dropdown。

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

编辑：用这段代码修改小提琴

于 2013-10-17T15:07:51.293 回答