Здравствуйте, имеется такой код:
.menulogo {
width: 21px;
height: 21px;
text-align: left;
margin: -3px 10px 0 0;
padding: 0;
float: left;
display: inline;
background: url('/i/about/menulogo.png') no-repeat 0 0;
background-position: 0 0;
border: none;
overflow: visible;
position:relative;
}
.menulogo span.rb {
width: 21px;
height: 21px;
text-align: left;
margin: 0;
padding: 0;
float: left;
display: inline;
background: url('/i/about/menulogo.png') no-repeat 0 0;
background-position: 0 -21px;
border: none;
overflow: visible;
position:relative;
}
$(document).ready(function(){
$('.menulogo')
.append('<span class="rb" />').each(function () {
var $span = $('> span.rb', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(1000, 1);
}, function () {
$span.stop().fadeTo(1000, 0);
});
});
});
<ul>
<li><a href=""><div class="menulogo"></div><span>Ссылка1</span></a></li>
<li><a href=""><div class="menulogo"></div><span>Ссылка2</span></a></li>
<li><a href=""><div class="menulogo"></div><span>Ссылка3</span></a></li>
<li><a href=""><div class="menulogo"></div><span>Ссылка4</span></a></li>
</ul>
Это скрипт плавного появление картинки при наведении на неё. Никак не могу связать с ссылкой,т.е. при наведении на ссылку, появляется картинка. Когда у всех <li> задавал пустой класс и его вписывал вместо this:
$(this).hover(function () {
$span.stop().fadeTo(1000, 1);
}, function () {
$span.stop().fadeTo(1000, 0);
});
});
то при наведении на ссылку, картинка появлялась сразу же у всех ссылок, а хотелось бы, чтобы только у одной ссылки появлялось изображение. На этом и застрял
Помогите кто может, подскажите пожалуйста.