如何使用；这"；在javascript中，在悬停的div中添加另一个子div

首先，对不起我的英语。
我不知道如何在代码中使用“this”在悬停的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>

这是我的脚本

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

});

您需要使用查找调用事件的元素this的子元素

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

或者，上下文选择器

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

---

我对javascript非常陌生。我不明白。@SushangNirola，比如

$（这个）。查找（“.childdiv”）.css（“不透明”，“.5”）

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