In my division, there are options for names and deletion. It is displayed on my website as:
1.jpg delete
The HTML code for the division is:
<div id="files1" class="files">
<b class='dataname' >1.jpg</b>
<span class='delimg' >delete</span>
</div>;
The CSS code for the delimg class is:
.delimg{
margin-left:20px;
color:#090;
cursor:pointer
}
I initially want the delete option to be hidden, so I added display:none in the delimg CSS:
.delimg{
margin-left:20px;
color:#090;
cursor:pointer;
display:none
}
Therefore, when hovering over the name 1.jpg, the delete should appear; and disappear when moving away from the name. I attempted to achieve this using the hover function:
$(document).ready(function() {
$('.files').hover(function() {
$('.delimg').css("display","block");
});
});
However, the positioning of the delete changed to underneath the name 1.jpg instead of beside it, like this:
1.jpg
delete
Additionally, I noticed that even after moving my mouse off the name, the delete option remained visible. This occurred because the delimg's display attribute was set to block, causing it to persist. I attempted using both mouseover and mouseout methods. The delete would appear when hovered over, but clicking on it became difficult, as it disappeared immediately upon moving the mouse away from the name.