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");


    CSS Howto..

    how to search with GET method in MVC

    How to hide header on scroll down, show on scroll up like linkedin menu

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    How to use Firebug to easily find which css file defines a particular style

    How to embed SVG styling with javascript?

    How to “add details” to CSS (example Box shadow)

    How do I insert a custom font to text with CSS? [duplicate]

    How to add a css class to jquery selectable

    How to simplify my CSS stylesheet?

    How to create a border with spaces in it [duplicate]

    How to keep text in textarea remain at the top?

    How to revise the css transitions with a delay

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    How do I get my List Items to move up a Little in CSS

    How to make image hover in css?

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    How to hide first level span element by CSS “>” selector

    How to shrink the width size hyperlink?

    How to dynamically change the color of the selected menu item of a web page?

    How to get a css property of an externally styled element with javascript

    Parsing awful HTML: How do I recognize boundaries with xpath?

    How to set size of SVG image in :before pseudo-class?

    How to move image slowly with animation when appending the image to tag

    How to change color of Bootstrap warning class table row

    How can you assign a class to an id in css or javascript?

    CSS: How to position child divs in main div side by side

    How to align image to the right?

    CSS How to center a div horizontally

    How can I make a photo which fit the div shape using css

    How to use Bootstrap 3 grid if elements are tiled with different height and widths