within your $.each when you look at selector $("a") to get style you
are not defining the current <a> within the $each
try changing
$src = "">
to
$src = "">
Samuel wrote:
Hi people. I was trying to port a script to a system that I'm
developing but I have some trouble with it's function. The thing is, I
have a <li> list with <a> elements that contain inline styles for
background-images. The script I'm using creates a <span> element
inside the <a> element with a CSS selector that should contain a
different background-position for the :hover and fading effect.
As I'm using an inline style instead of a CSS rule for the background-
image, there's no image at all for the <span> element created to
handle :hover and opacity.
The solution I thought was to get the style attribute from EACH <a>
element containing the background-image and putting as a attribute for
their <span> element but instead, it only gets the first <a>
background-image and sets for all the generated <span> elements!
Here is the code:
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
$src = ""
var $bg = $('span.hover', this).attr('style', $src);
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
HTML:
<ul id="navigation">
<li class="highlight">
<a href="" class="triplov" style="background-image:url(images/
1.jpg);"><h2>Item #1</h2></a>
</li>
<li class="highlight">
<a href="" class="unico" style="background-image:url(images/
2.jpg);"><h2>Item #2</h2></a>
</li>
<li class="highlight">
<a href="" class="unico" style="background-image:url(images/
3.jpg);"><h2>Item #3</h2></a>
</li>
</ul>
How it should be:
<ul id="navigation">
<li class="">
<a href="" class="triplov" style="background-image:url(images/
1.jpg);"><h2>Item #1</h2>
<span class="hover" style="background-image: url(images/
1.jpg); opacity: 1;"/></a>
</li>
<li class="">
<a href="" class="unico" style="background-image:url(images/
2.jpg);"><h2>Item #2</h2>
<span class="hover" style="background-image: url(images/
2.jpg); opacity: 0;"/></a>
</li>
<li class="">
<a href="" class="unico" style="background-image:url(images/
3.jpg);"><h2>Item #3</h2>
<span class="hover" style="background-image: url(images/
3.jpg); opacity: 0;"/></a>
</li>
</ul>
And this is how it's displaying:
<ul id="navigation">
<li class="">
<a href="" class="triplov" style="background-image:url(images/
1.jpg);"><h2>Item #1</h2>
<span class="hover" style="background-image: url(images/
1.jpg); opacity: 1;"/></a>
</li>
<li class="">
<a href="" class="unico" style="background-image:url(images/
2.jpg);"><h2>Item #2</h2>
<span class="hover" style="background-image: url(images/
1.jpg); opacity: 0;"/></a>
</li>
<li class="">
<a href="" class="unico" style="background-image:url(images/
3.jpg);"><h2>Item #3</h2>
<span class="hover" style="background-image: url(images/
1.jpg); opacity: 0;"/></a>
</li>
</ul>
Any thoughts or ideas?
I've removed the background-image from the CSS selectors because the
sources are going to be defined by forms in PHP. I'm still studying
the best solutions but so far, getting this to work only with jQuery
and html under these conditions is the best option.
This is the result from the codes above:
http://pastebin.me/ac4cc52af64f6e831366ca61c7bbe63b
|
