Question

在我的div中，有名称和删除。它出现在我的网站上：

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
 }

我希望首先隐藏删除，因此我在display:none CSS中添加了delimg：

.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方法。鼠标悬停时可能会出现删除。但我无法点击删除，因为当我将鼠标移动到删除时，一旦将鼠标移出名称，删除就会消失。

Answer 1

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

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

此外，它出现在下方的原因是因为您在block上使用inline-block。这是一个有效的例子：

＆＃13;

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

＆＃13;

 <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>

＆＃13;

Answer 2

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

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

}）; 如果它解决了您的问题，请告诉我。

Answer 3

据我所知，你有两个问题：

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

在这种情况下，解决方案是在代码中使用此行中的jquery toggle方法： $('.delimg').css("display","block"); 这样add css属性display: block就会被切换回来并被删除，这样链接就可以隐藏在鼠标上了。
您的第二个问题是delete链接位于jpg下的新行中。这里的解决方法是在您的css文件和事件回调方法中使用display: inline-block属性而不是display: block。

然而，您可以使用纯css完成所有这些，因为其余的答案意味着。

希望这能回答你的问题。

如何删除显示在同一行？

3 个答案: