I've got a prototype created in Meteor where the CSS / jQuery works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:
.addshadow {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
.addborder {
border: 1px solid gold;
}
...and this jQuery:
Template.postTravelSection0.events({
'mouseenter #imgPostTravelTop': function() {
$('#imgPostTravelTop').addClass('addborder');
$('#imgPostTravelTop').addClass('addshadow');
},
'mouseleave #imgPostTravelTop': function() {
$('#imgPostTravelTop').removeClass('addborder');
$('#imgPostTravelTop').removeClass('addshadow');
},
. . .
});
It works fine on my Meteor-generated page -- on mouseenter / hovering into an image, it grows a golden five O'Clock shadow, and on mouseleave they are removed.
However, virtually the same thing in the Sharepoint code:
CSS:
.finaff-form-help-shadow {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
}
.finaff-form-help-addborder {
border: 1px solid red;
}
(I used red just so that it will show up clearly)
jQuery:
$( "#imgPostTravelTopLeft, #imgPostTravelTopRight, #imgPostTravelCenter, #imgPostTravelBottom" ).hover(function() {
$(this).addClass('finaff-form-help-addborder');
$(this).addClass('finaff-form-help-shadow');
}, function() {
$(this).removeClass('finaff-form-help-addborder');
$(this).removeClass('finaff-form-help-shadow');
});
...has different effects, to wit:
- IE8: Nothing - no shadow, no border
- Firefox: shadow but not border
- Chrome: shadow but not border
It's not surprising that IE8 plays the role of the spoiled brat, living down to its recalcitrant reputation; but why do Firefox and Chrome also refuse to show the border?