How to remove hover state

Tags: javascript,jquery,html,css3

Problem :

JSFiddle: http://jsfiddle.net/baumdexterous/9DS2r/

1) I created an image with an opacity of 1. When you hover over it, the opacity becomes .3 and a button appears over the image. The problem, is that when you hover over the button, the opacity of the image returns to 1. How can I make the opacity of the image stay .3 when the hover is both over the image OR the button?

2) When you click play, the original image changes to a new image. But since the mouse is over the image, the new image has an opacity .3. How can I set the new image to have an opacity of 1 even when its hovered?

HTML:

<div class="show-image">
    <img src="https://s3.amazonaws.com/blitzbase-assets/assets/1.png" />
    <input class="the-buttons" type="button" value="Play" />
</div>

CSS:

div.show-image {
    position: relative;
    float:left;
    margin:0px;
    padding: 0px;
    background: #333;
}

div.show-image img {
    opacity: 1;
    background: white;
}

div.show-image img:hover {
     opacity: .3;
    -webkit-transition: opacity .2s ease-in-out;
}

div.show-image:hover input {
    display: block;
}
div.show-image input {
    position:absolute;
    display:none;
    top: 100px;
    left: 100px;
}
div.show-image input.hide {
    display: none;
}

Javascript:

    var originalImgSrc = $('img').attr('src');

// Change image on button click
$(".the-buttons").click(function() {

    $('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
    $(this).addClass("hide");
});

//Restore image on mouse out
$('.show-image img').mouseout(function() {
    $('img').attr("src", originalImgSrc );
    $('.the-buttons').removeClass("hide");
});

---

Solution :

Here's a fiddle

Here's the answer to both of your questions.

1. Put the hover on the parent:

   .show-image:hover img

2. Add the "hide" class on the parent and change the opacity that way.

   $(this).parent().addClass("hide");

   div.show-image.hide img{ opacity: 1; }

3. To add the play button back on hover after clicking the first time you would have to remove the hide class from the parent in your mouse out function:

   $('.the-buttons').parent().removeClass("hide");