javascript - 避免 ul li 菜单中的鼠标悬停变化

Question

我正在使用 twitter bootstrap 来获得像列表这样的选择选项。

我想避免用鼠标在列表项上移动会改变它们的背景。看截图:

下面是可见的代码。查看 jsfiddle 将是最简单的:

https://jsfiddle.net/qqnkc9u3/3/

html:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    D2ropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a class="my2" href="#"><!--data-value="action"--> Action</a></li>
    <li><a class="my2" href="#" data-value="another action">Another action</a></li>
    <li><a class="my2" href="#" data-value="something else here">Something else here</a></li>
    <li><a class="my2" href="#" data-value="separated link">Separated link</a></li>
</ul>

js:

$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span ></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

CSS:

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=PT+Sans');

#dropdownMenu1 {
/*text-indent: -150px;*/
-webkit-appearance: none;
-moz-appearance: none;

font-family: 'PT Sans', sans-serif;
/*font-style: italic;*/
color: red;
font-size: 18px;
text-align: left;

width: 242px;
height: 42px;
border: 4px;
/*background-color: #e7eaf3;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
/*color: #5B629B;*/
/*padding: 4px;*/
}

.my2 {
text-indent: -7px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

font-style: italic;
font-family: 'PT Sans', sans-serif;
color: red;
font-size: 18px;

-webkit-appearance: none;
-moz-appearance: none;
width: 242px;
height: 42px;
/*border: 4px;*/
/*color: #5B629B;*/
background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
}

Answer 1

您可以通过将 Bootstrap 选择器添加到您的 CSS 来覆盖 Bootstrap 默认设置；

.my2,
.dropdown .dropdown-menu>li>a:focus, 
.dropdown .dropdown-menu>li>a:hover {
    text-indent: -7px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    font-style: italic;
    font-family: 'PT Sans', sans-serif;
    color: red;
    font-size: 18px;

    -webkit-appearance: none;
    -moz-appearance: none;
    width: 242px;
    height: 42px;
    /*border: 4px;*/
    /*color: #5B629B;*/
    background: url("http://www.adelepham.com/deepthoughts/gray-pattern.jpg") no-repeat 0 0;
}

查看更新的 fiddle : https://jsfiddle.net/qqnkc9u3/4/