javascript - 如何使删除出现在同一行？

Question

在我的div中，有name和delete。它出现在我的网站上，如:

1.jpg delete

我的div的html代码是:

 <div id="files1" class="files">
     <b class='dataname' >1.jpg</b>
     <span class='delimg' >delete</span>
 </div>;

而 delimg CSS 的代码是:

.delimg{
    margin-left:20px; 
    color:#090;
    cursor:pointer
 }

我想一开始就隐藏删除，所以我在 delimg CSS 中添加了 display:none :

.delimg{
    margin-left:20px;
    color:#090; 
    cursor:pointer; 
    display:none
 }

因此，当我将鼠标悬停在名称 1.jpg 上时，可能会出现删除；当鼠标移开名称 1.jpg 时，删除应该消失。我尝试使用 hover 来实现:

$(document).ready(function() {
    $('.files').hover(function() {
         $('.delimg').css("display","block");
    });
});

但是删除显示已经变了，在名字1.jpg下面，而不是在名字1.jpg后面，比如:

1.jpg
 delete

另外我发现当我把鼠标从名字上移开时，删除仍然存在。我知道 delimg 属性显示已更改为 block，所以删除仍然存在。我试过 mouserover 和 mouserout 方法。鼠标悬停时可能会出现删除。但是我不能点击删除，因为当我移动mouser去删除时，一旦鼠标移出名称，删除就会消失。

Answer 1

无需使用 Javascript 即可完成此操作。您可以直接在 CSS 中完成:

.files:hover .delimg{
    display: inline-block;
}

此外，它出现在下面的原因是因为您在 inline-block 上使用 block 而不是。这是一个工作示例:

.delimg {
    margin-left:20px;
    color:#090; 
    cursor:pointer; 
    display:none
}
 
.files:hover .delimg {
    display: inline-block;
}

 <div id="files1" class="files">
     <b class='dataname' >1.jpg</b>
     <span class='delimg' >delete</span>
 </div>
 <div id="files2" class="files">
     <b class='dataname' >2.jpg</b>
     <span class='delimg' >delete</span>
 </div>