使 <li> 标签都具有相同的jquery mousedown / hover效果，而没有单独的ID

Question

我知道这是错误的，但我想模拟即时尝试完成的工作。

如何做到这一点，以使特定<ul class="myul">中的每个<li>元素都具有相同的mousedown / mouseout / hover / etc效果，但分别而不是一次全部。

当前，如果您将鼠标悬停或单击一个<li>则对所有这些对象都将发生影响。 我不希望使用单独的ID，因为<li>'s不会手动更新-该数字始终会变化。

 $(".deleteIcon").mouseover(function(){
     $(".deleteIcon").closest('li').css("opacity", "0.7");
 });

 $(".deleteIcon").mouseout(function(){
     $(".deleteIcon").closest('li').css("opacity", "1");
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

 $(".deleteIcon").mousedown(function(){
     $(".deleteIcon").closest('li').css("background-color", "#76101c");
 });

 $(".deleteIcon").mouseup(function(){
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

<ul>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 

</ul>

Answer 1

在处理程序中时，将$('.deleteIcon')查询$('.deleteIcon')为特定于上下文的$(this)查询。

$(".deleteIcon")
.mouseover(function(){
    $(this).closest('li').css("opacity", "0.7");
})
.mouseout(function(){
    $(this).closest('li').css("opacity", "1");
    $(this).closest('li').css("background-color", "#89b8d7");
})
.mousedown(function(){
    $(this).closest('li').css("background-color", "#76101c");
})
.mouseup(function(){
    $(this).closest('li').css("background-color", "#89b8d7");
});

Answer 2

只需选择列表项，例如$("#ulId li") ，然后通过管道$("#ulId li")效果。

$("#ulId li").mouseover(function() {
    $(this).css("opacity", "0.7");
}).mouseout(function() {
    $(this).css("opacity", "1");
    $(this).css("background-color", "#89b8d7");
}).mousedown(function() {
    $(this).css("background-color", "#76101c");
}).mouseup(function() {
    $(this).css("background-color", "#89b8d7");
});

当this是在li你有你的鼠标悬停，出来，向下和向上。

Answer 3

纯CSS解决方案：

.deleteIcon {
  opacity: 1;
  background-color: #89b8d7;
  transition: opacity 0.5s, background-color 0.5s;
}
.deleteIcon:hover {
  opacity: 0.7;
}
.deleteIcon:active {
  background-color: #76101c;
}