CODEWITHSUNDEEP
htmlcss
Sackling
Sackling

Reputation: 1820

using css transition on rollover of another element

I have a div with a background positioned absolutely on top of an image. When I roll over the div it changes colors using css3 transition.

But What I wanted to know is it if it was possible to roll over either the image, or the div and have it change colors either way?

<a href="http://localhost/">
      <div style="width:233px; float:left; position:relative; margin-right:17px; margin-bottom:20px;  ">
        <div style="position:absolute; top:0; left:0; width:213px; height:20px;  display:block; float:left; color:#fff; padding:10px; " class="category_roll">Camouflage Work Pants </div>

        <img src="images/cat_camo_pants.png" alt="Camouflage Work Pants" title=" Camouflage Work Pants " width="233" height="156">
      </div></a>

css:

.category_roll {
-webkit-transition: all 0.24s ease-out;
-moz-transition: all 0.24s ease-out;
-ms-transition: all 0.24s ease-out;
-o-transition: all 0.24s ease-out;
transition: all 0.24s ease-out;
-webkit-transition: all 0.24s ease-out 1s ease-in-out 0s;
-moz-transition: all 0.24s ease-out 1s ease-in-out 0s;
-ms-transition: all 0.24s ease-out 1s ease-in-out 0s;
-o-transition: all 0.24s ease-out 1s ease-in-out 0s;
transition: all 0.24s ease-out 1s ease-in-out 0s;
background: rgba(0, 0, 0, 0.7);
}

.category_roll:hover {background: rgba(201, 135, 2, 0.95);}

is this something that would require javascript?

Upvotes: 0

Views: 572

Answers (1)

The Dark Knight
The Dark Knight

Reputation: 5585

Okay this is what I have come out with. It needs Jquery

JS :

$( "#img" ).hover(
    function() {
        $("#topBar").addClass("category_roll").css('background', 'rgba(201, 135, 2, 0.95)');
    }
);

$( "#img" ).mouseout(function() {
     $("#topBar").css('background', 'rgba(0, 0, 0, 0.7)');
});

$( "#topBar" ).hover(
    function() {
        $("#topBar").addClass("category_roll").css('background', 'rgba(201, 135, 2, 0.95)');
    }
);

$( "#topBar" ).mouseout(function() {
     $("#topBar").css('background', 'rgba(0, 0, 0, 0.7)');
});

See the working fiddle here : http://jsfiddle.net/fNac3/4/

Upvotes: 1

Related Questions