Javascript 如何使删除显示在同一行中？

在我的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>;

我想先隐藏delete，所以我在

delimg

CSS:

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

因此，当我将鼠标移到名称1.jpg上时，可能会出现delete；当鼠标移出名称1.jpg时，删除应该消失。我尝试使用

悬停

来实现：

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

但删除显示的内容已更改，名称1.jpg下的内容不在名称1.jpg后，如：

1.jpg
 delete

---

此外，我发现当我把鼠标从名字上拿下来时，删除仍然存在。我知道

delimg

属性显示已更改为

block

，因此删除仍然存在。我试过mouserover和mouserout方法。鼠标悬停时可能会出现删除。但我无法单击delete，因为当我移动mouser进行删除时，一旦鼠标一次移出名称，删除就会消失。

无需使用Javascript来完成此操作。您可以直接在CSS中执行此操作：

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

另外，它出现在下面的原因是您在

内联块

上使用的是

块

。以下是一个工作示例：

.delimg{
左边距：20px；
颜色：#090；
光标：指针；
显示：无
}
.files:hover.delimg{
显示：内联块；
}

1.jpg
删除
2.jpg
删除

无需使用Javascript来完成此任务。您可以直接在CSS中执行此操作：

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

另外，它出现在下面的原因是您在

内联块

上使用的是

块

。以下是一个工作示例：

.delimg{
左边距：20px；
颜色：#090；
光标：指针；
显示：无
}
.files:hover.delimg{
显示：内联块；
}

1.jpg
删除
2.jpg
删除

如果要恢复删除范围的默认显示属性，请尝试此操作。并使用mouseout再次应用

显示：none

$(document).ready(function(){
$('.files').mouseover(function(){
$('.delimg').css("display","unset");
});
 $('.files').mouseout(function(){
    $('.delimg').css("display","none");
});

}))；

---

让我知道它是否解决了您的问题。

如果要恢复删除范围的默认

显示属性，请尝试此操作。并使用mouseout再次应用
显示：none

$(document).ready(function(){
$('.files').mouseover(function(){
$('.delimg').css("display","unset");
});
 $('.files').mouseout(function(){
    $('.delimg').css("display","none");
});

}))；
如果它解决了您的问题，请告诉我。
据我所知，您有两个问题：

鼠标悬停时，删除链接不会隐藏

在这种情况下，解决方案是在代码的这一行中使用jquery
toggle
方法：
$（'.delimg'）.css（“显示”、“块”）
这样，addcss属性
display:block
被切换回来并被删除，这样链接就可以隐藏在鼠标上方

第二个问题是
delete
链接位于
jpg
下的新行中。
这里的解决方案是在css文件和事件回调方法中使用
display:inline block
属性，而不是
display:block

然而，正如其他答案所暗示的，您可以使用纯css来完成所有这些

希望这能回答您的问题。
据我所知，您有两个问题：

鼠标悬停时，删除链接不会隐藏

在这种情况下，解决方案是在代码的这一行中使用jquery
toggle
方法：
$（'.delimg'）.css（“显示”、“块”）
这样，addcss属性
display:block
被切换回来并被删除，这样链接就可以隐藏在鼠标上方

第二个问题是
delete
链接位于
jpg
下的新行中。
这里的解决方案是在css文件和事件回调方法中使用
display:inline block
属性，而不是
display:block

然而，正如其他答案所暗示的，您可以使用纯css来完成所有这些

希望这能回答您的问题。
甚至不要使用JavaScript进行悬停，有
：hover
选择器甚至不要使用JavaScript进行悬停，有
：hover
选择器