I have a set of 3 images displayed inline, each enclosed in a span tag with the class imgAvatar. Positioned above them are 3 identical hidden images (delete buttons) stored within spans with the class imgAvatarSelector.
The CSS for the delete buttons is as follows:
.imgAvatarDelButtons {
display: none;
position: absolute;
float: right;
}
Here is the HTML markup:
<div id="Line1">
<span id="imgAvatarSelector1" number="1" class="imgAvatarSelector"><img id="imgAvatarDel1" number="1" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar1" number="1" class="imgAvatar"><img src="/files/test1/178131u7r-240.jpg"></span></span>
<span id="imgAvatarSelector2" number="2" class="imgAvatarSelector"><img id="imgAvatarDel2" number="2" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar2" number="2" class="imgAvatar"><img src="/files/test1/1de726eii-240.jpg"></span></span>
<span id="imgAvatarSelector3" number="3" class="imgAvatarSelector"><img id="imgAvatarDel3" number="3" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar3" number="3" class="imgAvatar"><img src="/files/test1/z5fdaz034-240.jpg"></span></span>
</div>
Below is the script responsible for showing and hiding the delete buttons:
$('.imgAvatarSelector').mouseover(function() {
$('#imgAvatarDel'+$(this).attr('number')).show();
});
$('.imgAvatarSelector').mouseout(function() {
$('#imgAvatarDel'+$(this).attr('number')).hide();
});
Upon hovering over the images, the delete buttons appear correctly above each image. However, upon mouseOUT and subsequent hover interactions, the positioning of the delete buttons becomes offset. This issue may require adjustments in the CSS or a different jQuery function.
UPDATE The functionality works fine in JSFiddle, but there seems to be a discrepancy when implemented in my application. The second delete button behaves unexpectedly by appearing on a new line. http://jsfiddle.net/vasuydwh/
UPDATE 2 Below is the complete CSS affecting the delete buttons.
UPDATE 3
In my application, I have 3 lines separated into 3 divisions. Only the first delete button on each line functions correctly, while the rest seem to drop down to the next line. There may be an issue with the div structure causing this misalignment, which I am currently investigating.