在我的 div 中，有名称和删除。它出现在我的网站上，例如：
1.jpg delete
我的 html div 代码是：
<div id="files1" class="files">
<b class='dataname' >1.jpg</b>
<span class='delimg' >delete</span>
</div>;
delimgCSS的代码是：
.delimg{
margin-left:20px;
color:#090;
cursor:pointer
}
我想首先隐藏删除，所以我display:none在delimgCSS 中添加了：
.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 方法。鼠标悬停时可能会出现删除。但是我无法点击删除，因为当我移动鼠标删除时，一旦鼠标移出名称，删除就会消失。
无需使用 Javascript 来完成此操作。你可以直接在 CSS 中做到：
.files:hover .delimg{
display: inline-block;
}
此外，它出现在下面的原因是因为您使用的是blockon inline-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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句