jquery - div下的mouseover和mouseout函数

Question

我想知道是否有任何方法可以“通过”div 使用 .mouseover 和 .mouseout jQuery 事件。我的意思是，我在一个 div 中放置了一个图像，上面有另一个 div。图像上的 div 用于给图像着色。由于这个不透明层，事件不起作用。但是，当我移除不透明层时，事件会按预期工作。这是我的 HTML 的副本:

    <div id="commercialopacity"></div>
    <p class="commercial">COMMERCIAL</p>
    <div id="hideimage"></div>
    <div class="portfolioimages">
        <img class="picture" id="commercialimage1" src="Project Images\\HarrisonHealthClinic\\Render 1-1.jpg">
    </div>
    <div class="portfolioimages">
        <img class="picture" id="commercialimage2" src="Project Images\\HarrisonHealthClinic\\Render 2-1.jpg" link="index.html">
    </div>
    <div class="portfolioimages">
        <img class="picture" id="commercialimage3" src="Project Images\\HarrisonHealthClinic\\Render 3-1.jpg">
    </div>
    <div id="residential"></div>

和我的 jQuery:

$("#commercialimage1").mouseover(function(){
    $("#commercialimage1").animate({marginLeft:"20%"},{duration:250, queue:false});
})
$("#commercialimage1").mouseout(function(){
    $("#commercialimage1").animate({marginLeft:"0%"},{duration:250,queue:false});
})
$("#commercialimage2").mouseover(function(){
    $("#commercialimage2").animate({marginLeft:"20%"},{duration:250, queue:false});
})
$("#commercialimage2").mouseout(function(){
    $("#commercialimage2").animate({marginLeft:"0%"},{duration:250, queue:false});
})
$("#commercialimage3").mouseover(function(){
    $("#commercialimage3").animate({marginLeft:"20%"},{duration:250,queue:false});
})
$("#commercialimage3").mouseout(function(){
    $("#commercialimage3").animate({marginLeft:"0%"},{duration:250,queue:false});
})

因此，#commercialopacity 是为上面的图像着色的 div。 另外，有什么方法可以为这个动画压缩我的 jQuery 代码吗？我意识到这可能不是最干净的方法，特别是如果我想将这些事件用于我将来添加的其他图像。

非常感谢您的帮助

Answer 1

是这样的吗？ https://jsfiddle.net/xcm02m4b/1/

CSS:

#container{
  max-width: 200px;
}
#commercialopacity{
  position: absolute;
  width: 100%;
  height: 400px;
  transition: background-color .25s;
  background-color: rgba(0,0,0,.5);
}
#container:hover #commercialopacity{
  background-color:transparent;
}
.picture{
  position: relative;
  transition: margin-left .25s;
}
#commercialimage1{
  display: inline-block;
  width: 100px;
  height: 100px;
}
#commercialimage2{
  display: block;
  width: 100px;
  height: 100px;
}
#commercialimage3{
  display: block;
  width: 100px;
  height: 100px;
}
.picture:hover{
  margin-left: 20%;
}

HTML:

<div id="container">

<div id="commercialopacity"></div>
<p class="commercial">COMMERCIAL</p>
<div id="hideimage"></div>
<div class="portfolioimages">
    <img class="picture" id="commercialimage1" src="Project Images\\HarrisonHealthClinic\\Render 1-1.jpg">
</div>
<div class="portfolioimages">
    <img class="picture" id="commercialimage2" src="Project Images\\HarrisonHealthClinic\\Render 2-1.jpg" link="index.html">
</div>
<div class="portfolioimages">
    <img class="picture" id="commercialimage3" src="Project Images\\HarrisonHealthClinic\\Render 3-1.jpg">
</div>
</div>
<div id="residential"></div>

我将您的 animate js 切换为 css 动画。如果没有太多的对象并且对于你想要的东西来说足够简单的话会更快