JQuery - затемнение содержимого любого элемента i наведите указатель мыши на содержащий класс

Question

Я хочу создать зависание над событием, которое затемняет любой элемент с классом «hover-change».

Я не хочу просто менять цвет фона запускаемого элемента, потому что хочу затемнить все (значки, текст, фон). Решение, которое я видел в Интернете, - это наложение другого div поверх выбранного, который является серым/прозрачным, и когда вы наводите верхний/верхний элемент, этот оверлей становится видимым/невидимым.

Это решение не будет работать, потому что я динамически создаю divs, и я хочу прикрепить эту функциональность ко многим различным элементам.

Высокий пример уровня того, что я ожидал бы хорошим решение было бы:

$(".hover-change").on("mouseover",function(e) { 
    $(e.target).css( /*make entire element darker*/); 

}); 

$(".hover-change").on("mouseout",function(e) { 
    $(e.target).css( /*make entire element normal colour*/); 
}); 

Я не могу наложить «скрытую темную прозрачную панель» над каждым элементом, потому что я динамически создавать HTML с рулями ,

Спасибо кучам всем, кто может мне помочь! :)

Answer 1

Я не могу наложить «скрытую темную прозрачную панель» над элементом КАЖДОГО, потому что я динамически создаю html с рулями.

Фактически вы можете, просто сделайте это, динамически.

, например:

$('.item').on("mouseover", function(){ 
 
    $(this).append('<div class="overlay"></div>') 
 
}) 
 
$('.item').on("mouseout", function(){ 
 
    $('.overlay', this).remove(); 
 
})

.item { 
 
    display: inline-block; 
 
    position:relative; 
 
    border: 1px solid rgba(0,0,0,.125); 
 
    background-color: rgba(253,253,253,1); 
 
    margin: 2px; 
 
    width: 40px; 
 
    height: 40px; 
 
    text-align:center; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    pointer-events: none; 
 
    background-color: rgba(0,0,0,.75); 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    text 
 
</div> 
 
<div class="item"> 
 
    text 
 
</div> 
 
<div class="item"> 
 
    text 
 
</div> 
 
<div class="item"> 
 
    text 
 
</div>

Answer 2

Это решение не будет работать, потому что я динамически создавать дивы

Таким образом, вы, возможно, потребуется передать событие. Вы можете внести эти изменения.

$("body").on("mouseover",'.hover-change',function(e) { 
    $(e.target).css( /*make entire element darker*/); 

}); 

$("body").on("mouseout",'.hover-change',function(e) { 
    $(e.target).css( /*make entire element normal colour*/); 
}); 

Answer 3

$ (документ "). На (" наведении курсора мыши», " зависать-изменение", функция (е) { $ (e.target) .css (/ сделать весь элемент темнее /) ;

});

$ ("зависать-изменение" документ) .on ("MouseOut", функция, (е) { $ (e.target) .css (/ сделать весь элемент нормальный цвет /) })

Это должно работать на всех элементах, присутствующих в DOM во время выполнения этого скрипта, а также на элементах, которые будут добавлены в будущем.

Я нахожусь на мобильном языке, извините меня за проблемы с форматом.