onclick and hover method not working

Question

Basically i am trying to have a button which allows the user to hover for which an other image will be displayed on top, but when the clicks on it will be set to a click image state

I have tried to use jquery hover function but i have had no luck - it does not allow me to click on the button and display the overstate

i can get it too work individually for example if a user clicks on a button then a new image will appear, but when i try and get hover to work aswell as a clicked overstate it messes up

any help would be appreciated

Jquery

$('.M').hover(
    function(){
      $(this).attr('src','Buttons/Button-MaleOver.png')
    },
    function(){
      $(this).attr('src','Buttons/Button-Male.png')
    }
) 

  $(".M").click(function(){

   $(this).prop("src","Buttons/Button-MaleOver.png");    

});

HTML

<img class="M" src="Buttons/Button-Male.png" ></img>

I'm not seeing an issue.. ! jsfiddle.net/ryCNa/1 (Apart from the click disappearing) — MackieeE
– MackieeE, Commented Nov 19, 2013 at 12:54

Martin Geisse · Accepted Answer · 2013-11-19 12:55:41Z

3

First, things might be easier by mixing CSS for the hover effect and Javascript for changing the button on click.

Then, note that you are mixing .attr() and .prop() -- not sure why you're doing this.

Third, I think the main problem is that clicking changes the image, but then when the cursor moves out, the normal image gets restored. You'll have to either set a variable that indicates "clicked" state, so the hover effect doesn't kick in. Or the hover effect checks the current value of the "src" attribute and leaves it alonge if it has the "clicked" image.

answered Nov 19, 2013 at 12:55

Martin Geisse

1,5291 gold badge12 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

onclick and hover method not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related