I have a data list and inside them anchors that contain images. On image hover, they should tint with a certain color. So I have it so that the image changes opacity on hover and add the tint color as the background color of the container anchor. Of course I have to change the anchor to display:block to do this. I did just this, but the container of the anchor is too wide and I don't want to have the anchor background show next to the images that can be different sizes. So I came up with this Jquery, and it works perfectly in every browser, but IE. I've tried IE6-10. Chrome and Firefox works fine.
jQuery(document).ready(function(){
if(jQuery(".posters").length>0){
jQuery(".posters img").bind('load', function() {
var anchor = jQuery(this).parent('a');
var image = jQuery(this);
var imageWidth = image.width();
var imageHeight = image.height();
anchor.css({
"background": "#767676",
"display": "block",
"width": imageWidth+"px",
"height": imageHeight+"px"
})
});
};
});
Can you help me?