2016-02-12 43 views
-1

我有一个自举下拉菜单里子列表项不停地转动透明的,当我将鼠标悬停在任何项目:自举菜单列表项透明悬停

enter image description here

当我不悬停在孩子列表项,菜单保留了它原有的字体颜色和大小 enter image description here

这里是我的CSS代码:

.dropdown-menu li { width: 160px !important; height: 30px !important; }

如何防止悬停时儿童列表项目变透明?

.dropdown-menu li:hover{ color:black} 

没有工作

下面是代码来创建菜单

$(document).ready(function() { 

$.ajax({ 
    url: 'MenuHandler.ashx', 
    method: 'get', 
    datatype: 'json', 
    success: function (data) { 
     data = JSON.parse(data); 
     buildmenu($('.menu'), data); 
     $('.menu').menu(); 

    } 
}) 

var lastliElement; // if more occurance append to the last element 

function buildmenu(parent, items) { 
    var tabOccurance = []; 
    $.each(items, function() { 
     var nbOccurnace = countOccurance(this.MenuText, items); 
     // search if occurance text alredy exist 
     if (tabOccurance.indexOf(this.MenuText) == -1) { // this doesn't work on ecma6 and above 
      var length = this.ParentID == null ? this.List.length : nbOccurnace; 
      var li = $('<li><a href="Cars/Acura/car.aspx">' + this.MenuText + '(' + length + ')' + '</a></li>'); 
      lastliElement = li; 
      if (!this.Active) { 
       li.addclass('ui-state-disabled'); 
      } 

      li.appendTo(parent); 

     } 
     if (nbOccurnace > 1) 
      tabOccurance.push(this.MenuText); 

     if (this.List && this.List.length > 0) { 

      var ul = $('<ul></ul>'); 
      ul.appendTo(lastliElement); 
      buildmenu(ul, this.List); 
     } 
    }); 
} 
// to conunt occurance of menuText 
function countOccurance(MenuText, list) { 
    var count = 0 
    $.each(list, function() { 
     if (this.MenuText === MenuText) 
      count++; 
    }); 
    return count; 
} 

});

+0

你能分享完整的代码吗?可能在悬停你给不同的风格。 – induprakash

+0

从开发工具中选择下拉菜单选择:悬停事件,你会发现':hover' css in..overwrite it..may b它会像''.dropdown-menu li:hover {color:black}' – Dhara

回答

0

您可以设置自己的悬停样式。它是这样完成的:

.dropdown-menu li: hover{ 
    color:black !important; /* or the one you want */ 
    /* more styles */ 
}