hover: append element, can't remove on mouseout..
nothing I try to remove element that was appended on hover works:
- $('#links a').each(function(i) {
var index = i + 1;
$(this).css('background','url(images/item' + index + '.png)');
});
var roll = '<img id="rollover" src="images/rollover.png" />';
$('#links a').each(function(i) {
$(this).hover(
function() {
$(this).parent().append(roll);
// $(this).css('background','url(images/rollover.gif');
},
function() {
var index = i + 1;
// roll.remove(); // doesn't work
// roll.hide(); // doesn't work
$('#rollover').css('visibility','hidden'); // doesn't work
$(this).css('background','url(images/item' + index + '.png)');
}
);
});
nothing I try to remove appended element on moseout (2nd hover fn) works...
thank you...
PS: the reason I need to append an img-tag instead of doing hover with bg-img is that img is a .png, & the transparency is not respected when they're used as bg-images (also, in real life that "img" won't be an image, it will be a div with content, possibly coming from the back-end.. thank you.)