CODEWITHSUNDEEP
jqueryhtmlcssimage
user3678885
user3678885

Reputation: 3

changing image on mouseover

I have the following 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>

Using Jquery I want to change the image of each individual <li> when mouse on it. So far i manage this:

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

But doing so it change the image on all <li>

I know it can be dune

Can someone help

Upvotes: 0

Views: 111

Answers (5)

Kapil gopinath
Kapil gopinath

Reputation: 1053

Added jquery mouse leave event 

$('#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/

Upvotes: 0

midstack
midstack

Reputation: 2123

Can you try

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/

Upvotes: 1

niko
niko

Reputation: 9393

Your $('li > img') returns all the images that are children of li and .attr() is applied on all the selected images. There are various ways to do it.

Since your img is just before your anchor you can get it using .prev()

Try this

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

If your are going to insert any elements in between img and anchor it does not work. alternate solution would be

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

Try closing your img tags like this <img src="images/bullet.png" class="li-icon"/>

Upvotes: 1

AppleBud
AppleBud

Reputation: 1541

Try this. I have applied this in my code and its working fine.

        $('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+"');
        });

Hope it works.

Upvotes: 0

Catalin Lungu
Catalin Lungu

Reputation: 139

It's changing the image on all list items because of the selector $('li > img'). You have to use it like this: $(this).parent().find('img').attr('src', 'images/bulletactive.png');

Just as an advice, this is more easy and fast with CSS.

Upvotes: 0

Related Questions