JQuery

Question

我想创建一个悬停事件，它可以使带有 class "hover-change" 的任何元素变暗。

我不想简单地更改触发元素的背景颜色，因为我想使所有内容（图标、文本、背景）变暗。我在网上看到的一个解决方案是将另一个 div 覆盖在所选 grey/transparent 的顶部，当您将 over/out 悬停在该元素上时，该覆盖将变为 visible/invisible。

此解决方案不起作用，因为我动态创建了 div，并且我想将此功能附加到许多不同的元素。

我期望好的解决方案的高级示例是：

 $(".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*/ );
 });

我无法在每个元素上覆盖 "hidden dark transparent pane"，因为我正在动态创建带有车把的 html。

非常感谢任何可以帮助我的人！ :)

Answer 1

This solution wont work because I dynamically create divs

因此您可能需要委托该活动。您可以进行这些更改。

 $("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 2

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

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

这应该适用于执行此脚本时 DOM 中存在的所有元素，以及将来添加的任何元素。

Answer 3

I can't overlay a "hidden dark transparent pane" over EVERY element because I am dynamically creating the html with handlebars.

其实你可以，只是做，动态。

例如：

$('.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>

JQuery - 使我悬停在包含某个 class 的任何元素的内容变暗

JQuery - Darken contents of any element i hover over containing a certain class

html

javascript

css

mousehover