javascript - 如何在 javascript 中使用 "this"在悬停的 div 内添加另一个子 div

Question

首先，对不起我的英语。
我不知道如何在代码中使用 "this" 在悬停的 div 内添加 div。我的代码发生的情况是，每当我将鼠标悬停在其中任何一个上时，子 div 都会添加到两个 div 中。
但是，我希望子 div 仅添加到悬停的 div 中。
我希望你能理解我的问题。

这是我的 html

<div class="maindiv">
<img src="IMG_1212.JPG" height="200" width="200">
<div class="childdiv">
<img src="key172.png" width="35" height="35">
</div>
</div>
<div class="asd">
<img src="IMG_1071.jpg" height="200" width="200">
<div class="childdiv">
<img src="key172.png" width="35" height="35">
</div>
</div>

这是我的 CSS

.maindiv{
    height:200;
    width:200;
    border:#999 2px solid;
    cursor:pointer;
    display:inline-block;
}
.maindiv:hover{
    border:#993 2px solid;
}
.childdiv{
    position:absolute;
    top:20px;
    opacity:0;
    transition: top 0.3s linear 0s, opacity 0.3s linear 0s;

}
.childdiv:hover{
    opacity:0.9;
}

这是我的脚本

$(document).ready(function() {
$(".maindiv").hover(
function(){
    $(".childdiv").css("opacity",".5");
    $(".childdiv").css("top","15px");
},
function(){
    $(".childdiv").css("opacity","0");
    $(".childdiv").css("top","20px");
});

});

Answer 1

您需要使用find()查找 this 的子元素，即调用该事件的元素。

$(this).find(".childdiv").css("opacity",".5")

或者，上下文选择器

$(".childdiv", this).css("opacity",".5")