Set background position to position of parent
Here's the code I tried, but it doesn;t seem to work:
-
$(document).ready(function(){
$("#navigation a").each(function(e){
var position = $(this).parent().position();
$(this).css({'background-position' : position.left + ' 0'});
});
});
#navigation li is the parent element, which is positioned relative. The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.
The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).