изменение изображения при наведении курсора

Question

изменение изображения при наведении курсора

0

У меня есть следующий HTML:

<div id="bullets"> 
  <ul id="intrebari"> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> Frequently Asked Questions </ a> </ li> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> custumer Support </ a> </ li> 
    <li> <img src="images/bullet.png" class="li-icon"> <a href="#"> custumer Login </ a> </ li> 
  </ ul> 
</ div>

Используя JQuery, я хочу изменить изображение каждого отдельного <li> при наведении на него мыши. Пока я управляю этим:

$(document).ready(function() {
    $('#intrebari>li a').mouseover(function() {
        $(this).css('color: red')
        $('li > img').attr('src', 'images/bulletactive.png');
    });
});

Но при этом он меняет изображение на всех <li>

Я знаю, что это может быть дюна

Может кто-то помочь

user3678885 27 май 2014, в 10:21

Источник

0

Можете ли вы показать нам свой dom structre, img, размещенный после тега привязки или перед тегом привязки
niko 27 май 2014, в 08:25
2

ваши закрывающие теги сломаны. Там не должно быть места там.
Joseph Marikle 27 май 2014, в 08:27
0

$(this).prev()....
Abhitalks 27 май 2014, в 08:27
0

Не редактируйте исходный код для устранения проблем . @JosephMarikle прав, ваши закрывающие теги неверны, а построенное дерево DOM также неверно.
Antti Haapala 27 май 2014, в 08:39
1

Джозеф Марикл - в моем редакторе нет места.
user3678885 27 май 2014, в 08:42
3

затем исправьте соответствующий код
Antti Haapala 27 май 2014, в 08:43

Показать ещё 4 комментария

Теги:

jquery

html

css

image

5 ответов

1

Ты можешь попробовать

HTML

<div id="bullets"> 
  <ul id="intrebari"> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> Frequently Asked Questions </a> </li> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> custumer Support </a> </li> 
      <li> <img src="http://placehold.it/20/20" class="li-icon" /> <a href="#"> custumer Login </a> </li> 
  </ul> 
</div>

Jquery

$('#intrebari>li a').mouseover(function() {
    $(this)
    .parents('#intrebari')
    .find('a').css('color','black')
    .prev().attr('src','http://placehold.it/20/20')
    .end().end().end()
    .css('color','red').prev().attr('src','http://placehold.it/30/30');

 });

http://jsfiddle.net/Na7Nb/1/

midstack 27 май 2014, в 07:19

0

Попробуй это. Я применил это в своем коде и его работе.

        $('li').mouseover(function(){
        var $this = $(this);

    // img over
        $img = $this.find('img').attr('src');               
        bg = $img.replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'').replace(/^.*\/|\.[^.]*$/g, '');
        $url ="pathToYourImage\bullet.png"; 
        $this.find('img').attr('src', '');
        $this.find('img').attr('src','"+$url+"');
        });

Надеюсь, что это работает.

AppleBud 27 май 2014, в 06:55

0

Добавлено событие удаления jQuery мыши

$('#intrebari>li a').mouseover(function() { console.log('over')
            $(this).css('color','red')
            $(this).prev().attr('src', 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png');
        });
    $('#intrebari>li a').mouseleave(function() { console.log('out')
            $(this).css('color', 'blue')
            $(this).prev().attr('src','https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
        });

http://jsfiddle.net/kapilgopinath/4937t/38/

Kapil gopinath 27 май 2014, в 06:43

0

Это изменение изображения во всех элементах списка из-за селектора $ ('li> img'). Вы должны использовать его следующим образом: $ (this).parent(). Find ('img'). Attr ('src', 'images/bulletactive.png');

Как совет, это проще и быстрее с CSS.

Catalin Lungu 27 май 2014, в 05:40

Ещё вопросы

Можете ли вы показать нам свой dom structre, img, размещенный после тега привязки или перед тегом привязки
ваши закрывающие теги сломаны. Там не должно быть места там.
Не редактируйте исходный код для устранения проблем . @JosephMarikle прав, ваши закрывающие теги неверны, а построенное дерево DOM также неверно.
Джозеф Марикл - в моем редакторе нет места.
затем исправьте соответствующий код

niko · Accepted Answer · 2014-05-27T06-23-00.000Z

Ваш $('li > img') возвращает все изображения, которые являются .attr() элементами li и .attr() применяется ко всем выбранным изображениям. Существуют различные способы сделать это.

Поскольку ваш img находится непосредственно перед вашим якорем, вы можете получить его с помощью .prev()

Попробуй это

$(document).ready(function() {
    $('#intrebari>li a').mouseover(function() {
        $(this).css('color: red')
        $(this).prev().attr('src', 'images/bulletactive.png');
    });
});

Если вы собираетесь вставлять какие-либо элементы между img и anchor, это не сработает. альтернативное решение было бы

$(this).closest("li").children("img").attr('src', 'images/bulletactive.png');

Попробуйте закрыть свои теги img следующим образом: <img src="images/bullet.png" class="li-icon"/>

Спасибо за быстрый ответ. Но изображение до изменения. Что я хочу, чтобы изображение изменилось по умолчанию, то изображение bulletactive.png
это работает здесь @ user3678885 jsfiddle.net/4937t/37