这是我的 html 文件中的代码:
<div id="centerBlock">
<block>
<site style="padding-top: 10px; margin-left: 20px">
<img src="./images/site1.png" alt="some_text"/>
</site>
<textOnImage style="padding-top: 10px; margin-left: 20px">
lolol
</textOnImage>
</block>
<block>
<site style="padding-top: 163px; margin-left: 20px">
<img src="./images/site1.png" alt="some_text"/>
</site>
<textOnImage style="padding-top: 163px; margin-left: 20px">
lolol
</textOnImage>
</block>
</div>
这是我的 javascript:
$("block").mouseenter(function(){
$("site").fadeTo("slow", 0.25);
$("textOnImage").animate({
opacity: "1"
}, 600 );
});
$("block").mouseleave(function(){
$("site").fadeTo("slow", 1);
$("textOnImage").animate({
opacity: "0"
}, 600 );
});
但是,当我将鼠标悬停在两个 block 元素之一上时,它们的不透明度都会下降,而当我将鼠标移开时,它们都会回到原始状态。我已经搜索了几个小时,而且我 100% 确定我一直在搜索不正确的术语。我该如何单独处理它们?
最佳答案
使用 this
仅定位触发事件的 block ,然后使用 .find()
在该特定 block 中查找所需的元素。您之前的做法显然是找到整个页面中的所有 site
元素和所有 textOnImage
元素,而不仅仅是触发事件的 block 中的元素。
$("block").mouseenter(function(){
var $this = $(this);
$this.find("site").fadeTo("slow", 0.25);
$this.find("textOnImage").animate({
opacity: "1"
}, 600 );
});
$("block").mouseleave(function(){
var $this = $(this);
$this.find("site").fadeTo("slow", 1);
$this.find("textOnImage").animate({
opacity: "0"
}, 600 );
});
关于javascript - Jquery影响所有具有相同名称的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9143055/