2016-02-12 2 views
-1

У меня есть самозагрузки выпадающего меню, в котором элементы списка ребенка держать поворот прозрачным, когда я наведите курсор мыши на любой из пунктов:Boostrap меню Элемент списка Transparent на Hover

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

Выберите выпадающий список из инструмента dev tool: hover event, в котором вы найдете ': hover' css, в том, что..повторить его..may b это будет выглядеть как .dropdown-menu li: hover {color: black}' – Dhara

ответ

0

Вы можете установить свои собственные стили для зависания. Это делается так:

.dropdown-menu li: hover{ 
    color:black !important; /* or the one you want */ 
    /* more styles */ 
} 
Смежные вопросы