Question

我想知道是否有任何方法可以使用.mouseover和.mouseout jQuery事件“通过”div。我的意思是，我将一个图像放在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});
})

因此，＃joborpacity是为上面的图像着色的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>

我将你的动画js切换为css动画。如果没有太多的对象，并且对于你想要的东西来说足够简单，那就快得多了

Answer 2

您的代码中存在一些需要修复的问题：

您使用图像ID多次绑定同一事件，如果您只是给它们一个类并将事件绑定到它，或者只是将事件绑定到容器div，则会花费更少的代码并提供最佳性能。图像。
如果您将Dictionary<string, List<int>> pageMap = enrolledStudents .SelectMany(kvp => kvp.Value.Select(value => new { Key = value, Value = kvp.Key })) .GroupBy(a => a.Key) .ToDictionary(a => a.Key, a => a.Select(x => x.Value).ToList());和return pageMap[s];事件直接绑定到图像上，当光标移到它们的容器div之外时，它们会触发，这就是当你添加它时会发生什么裕度。

<强>解决方案：

我认为最好和最干净的方法是使用mouseover类将事件与每个图像的父div绑定一次，它将解决您的代码问题。

这应该是代码：

mouseout

<强>演示：

这是一个优化代码的工作代码段。

＆＃13;

.portfolioimages

＆＃13;

$(".portfolioimages").mouseover(function() {
   $(this).find("img").animate({marginLeft: "20%"}, {duration: 250, queue: false});
});

$(".portfolioimages").mouseout(function() {
   $(this).find("img").animate({marginLeft: "0%"}, { duration: 250, queue: false});
});

＆＃13;

div下的mouseover和mouseout函数

2 个答案: