javascript - javascript子元素CSS

我在css中设置了两个类
.dragbox和.removebutton

.dragbox是div，.removebutton是div中的按钮

我在页面上有多个动态创建的.dragbox。

如何使用javascript仅显示当前.dragbox的.removebutton？

目前，当我将鼠标悬停在一个.dragbox上时，所有.dragbox的所有.removebutton都变为可见。我只想显示当前的一个

继承人的CSS

.dragbox
 {
  position:absolute;
  width:10px;
  height:25px;
  padding: 0.0em;
  margin:25px;
  }

 .removebutton
{
      background-image:url(img/delete.png);
      background-repeat:
      no-repeat;visibility:hidden;
}

和这javascript

   $('.dragbox').hover(function()
  {
    $(this).css('border', '1px solid #000');
    $(this).css('background-image','url(img/move.png)');
    $(this).css('background-repeat','no-repeat');
    $(this).css('width', '15px');
    $(this).css('height', '15px');
        $(".removebutton").css('visibility', 'visible');
   });

最佳答案

尝试：

$('.dragbox').hover(function()
{
    $(this).css('border', '1px solid #000');
    $(this).css('background-image','url(img/move.png)');
    $(this).css('background-repeat','no-repeat');
    $(this).css('width', '15px');
    $(this).css('height', '15px');
    $(this).find(".removebutton").css('visibility', 'visible');
});

您的原始代码将在页面上找到.removeButton的每个实例。上面的代码将针对当前悬停的.removeButton div中的.dragbox。