Change css background image when hover

Question

Hi i have a little problem with hovering an image. I just want my image to be replace when hovering over a text and then go back its original image after hovering. However when i hover, the images changes but it does not goes back to its original image after hover.

Here is my jquery code.

<script type="text/javascript">
	var j = jQuery.noConflict();

	j(function () {

		j( ".click-me .hover-me" ).hover(function() {
		  j( ".click-me .hover-me ul" ).slideToggle( "fast", function() {
		   //change image to new image
           j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-down.png)');
           
		  });
		});
        //after hover image goes back to previous image
		j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)');
	});

</script>

Hope you can help me. Thanks

score 3 · Accepted Answer · 2015-05-19 07:53:29Z

3

.hover registers a callback, it does not immediately execute it. So there is no 'after' the call to .hover. In fact, the line

j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)');

is executed once after the callback has been registered. It is not called after the callback has been executed.

Implement .hover( handlerIn, handlerOut ):

j( ".click-me .hover-me" ).hover(
  function() {
    j( ".click-me .hover-me ul" ).slideToggle( "fast", function() {
      //change image to new image
      j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-down.png)');           
    });
  },
  function() {
    //after hover image goes back to previous image
    j(".click-me .hover-me li .clicker ").css('background-image','url(images/arrow-right.png)');
  }
);

edited May 19, 2015 at 7:53

answered May 19, 2015 at 7:48

user1907906

Sign up to request clarification or add additional context in comments.

1 Comment

shadowbudz Over a year ago

Hi @Lutz Horn, i tried your code and it works as expected but the slideToggle would not close even after i hover. It would just close if i hover back.

kosmos · Accepted Answer · 2015-05-19 07:50:23Z

1

.hover() works with two functions as parameters, one for each action (mouse enter, mouse leave). I improved a little the code to prevent the repeating of selectors as much as possible:

var j = jQuery.noConflict();

j(function () {
    var $target = j( ".click-me .hover-me" );

    $target.hover(function() {
        j("ul", this).slideToggle( "fast", function() {
            //change image to new image
            j(".clicker", $target).css('background-image','url(images/arrow-down.png)');

        });
    }, function(){
        //after hover image goes back to previous image
        j(".clicker", $target).css('background-image','url(images/arrow-right.png)');
    });

});

answered May 19, 2015 at 7:50

kosmos

4,2881 gold badge21 silver badges38 bronze badges

1 Comment

shadowbudz Over a year ago

Hi kmsdev. I tried your code. And it works just the way i expected. Thanks but there is a small problem, when i hover, the dropdown would not close. It would just close when i hover it again.

Amit Soni · Accepted Answer · 2015-05-19 07:54:03Z

1

Try this

j(".click-me .hover-me").hover(function() {
    j(".click-me .hover-me ul").slideToggle("fast", function() {
        //change image to new image
        j(".click-me .hover-me li .clicker ").css('background-image', 'url(images/arrow-down.png)');
    }, function() {
        j(".click-me .hover-me li .clicker ").css('background-image', 'url(images/arrow-right.png)');
});

DEMO

edited May 19, 2015 at 7:54

answered May 19, 2015 at 7:47

Amit Soni

1,4271 gold badge9 silver badges18 bronze badges

1 Comment

Tushar Over a year ago

Amit add some explanation

DonnaJo · Accepted Answer · 2015-05-19 08:02:24Z

0

Have you tried using mouseenter and mouseleave instead of hover?

On mouseenter make the first change, then on mouseleave switch it back...

https://api.jquery.com/mouseenter/

https://api.jquery.com/mouseleave/

    <script type="text/javascript">
    	var j = jQuery.noConflict();

    	j('.click-me .hover-me').mouseenter(function(){
	j('.click-me .hover-me ul').slideToggle('fast', function(){
	//Change image to new image
	j('.click-me .hover-me li .clicker').css('background-image', 'url(images/arrow-down.png)');
	});
});
j('.click-me .hover-me').mouseleave(function(){
	j('.click-me .hover-me ul').slideToggle('fast', function(){
	//Change image to new image
	j('.click-me .hover-me li .clicker').css('background-image', 'url(images/arrow-right.png)');
	});
});

    </script>

answered May 19, 2015 at 8:02

DonnaJo

5386 silver badges15 bronze badges

1 Comment

DonnaJo Over a year ago

@LutzHorn put this much more eloquently, below. +1 for their answer.

Asim Shaikh · Accepted Answer · 2015-05-19 08:17:07Z

0

Try this.

   $(selector).hover(inFunction,outFunction);

   function infunction() 
   {
     //code to change image on hover
   }

   function outFunction() 
   {
     //code to change image to on leave hover
   }

edited May 19, 2015 at 8:17

answered May 19, 2015 at 7:49

Asim Shaikh

1699 bronze badges

Comments

guest271314 · Accepted Answer · 2015-05-19 08:28:11Z

If interpret Question correctly at

I just want my image to be replace when hovering over a text and then go back its original image after hovering.

try utilizing css :hover

var j = jQuery.noConflict();

j(function() {
  j(".click-me .hover-me").hover(function() {
    j(".click-me .hover-me ul").slideToggle("fast");
  });
});

.hover-me ul {
  width: 100px;
  height: 100px;
  display: none;
}

.clicker {
  display: block;
}
/* default, e.g.; `background:url(images/arrow-right.png)`  */
.clicker {
  background: yellow;
}
/* hover, e.g., `background:url(images/arrow-down.png)` */
.clicker:hover {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="click-me">
  <div class="hover-me">
    hover
    <ul>
      <li><span class="clicker">clicker</span>
      </li>
    </ul>
  </div>
</div>

Collectives™ on Stack Overflow

Change css background image when hover

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related