避免在鼠標懸停更改uli menue

我正在使用twitter bootstrap爲了有一個像列表一樣的選擇選項。避免在鼠標懸停更改uli menue

我想避免用鼠標移動到列表項上，改變它們的背景。見screeshot：

在下面看到的代碼。這將是最簡單的辦法看看的jsfiddle：

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

來源

2017-01-23 user2145488

您可以通過向CSS添加Bootstrap選擇器來覆蓋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; 
}

查看更新後的小提琴： https://jsfiddle.net/qqnkc9u3/4/

來源

2017-01-23 19:52:58

避免在鼠標懸停更改uli menue

回答

相關問題