У меня есть самозагрузки выпадающего меню, в котором элементы списка ребенка держать поворот прозрачным, когда я наведите курсор мыши на любой из пунктов:Boostrap меню Элемент списка Transparent на Hover
Когда я не нависают над ребенок элементов списка, меню сохраняет его первоначальный цвет и размер шрифта
Вот мой 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;
}
});
Можете ли вы предоставить полный код? Может быть, вы наведите указатель на разные стили. – induprakash
Выберите выпадающий список из инструмента dev tool: hover event, в котором вы найдете ': hover' css, в том, что..повторить его..may b это будет выглядеть как .dropdown-menu li: hover {color: black}' – Dhara