javascript 子元素 css

Question

我在 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'); 
   });

Answer 1

尝试:

$('.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 为目标，它是当前悬停的 .dragbox div 的一部分。