Hover opacity for a different image than the one hovering

I'm using the CSS ':hover' rule to make an image 'disappear' and reappear using opacity changes.

I'm sure there's a simple code for this, but I can't find it and I'm pretty inexperienced.

I have image A. Next to image A, I have image B. Image B's opacity is set at 0. When I hover over image A, I want to change image B's opacity to 1:

<img class="a" src="a.jpg"> <img class="b" src="b.jpg">

All the examples I found for this kind of thing were for changing image A's opacity when you hover over image A, but I'm looking to change image B's opacity when I hover over image A.

How can I alter this code

image.A:hover { opacity:1; }

To affect image B?

Answers


Stab in the dark:

img.A:hover + img.B { opacity: 1 }

You would want to use jQuery to accomplish this more efficiently in more browsers. Older browsers do not support new CSS3 properties.

$(document).ready(function(){
    $('.imageA').hover(function(){
        $('.imageB').animate({
            'opacity': 1
        }, 500);
    }, function(){
        $('.imageB').animate({
            'opacity': 0
        }, 500);
    });
});

Check out my example

http://jsfiddle.net/Q5c9q/


If you need to accomplish this with just css, this is how to do it.

http://jsfiddle.net/Q5c9q/1/


Need Your Help

How to create table in browser asp.net mvc?

c# asp.net asp.net-mvc visual-studio-2013

we all know how to create new row on table when application is running on website.