2016-02-12 41 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 */ 
}