在我的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去删除时,一旦鼠标移出名称,删除就会消失。
最佳答案
无需使用 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>
关于javascript - 如何使删除出现在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45851694/