html - 在另一个元素的翻转上使用 css 过渡

Question

我有一个背景绝对位于图像顶部的 div。当我翻转 div 时，它使用 css3 过渡更改颜色。

但我想知道的是，是否可以翻转图像或 div 并让它改变颜色？

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

这是需要javascript的东西吗？

Answer 1

好的，这就是我想出来的。它需要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)');
});

在这里查看工作小提琴：http: //jsfiddle.net/fNac3/4/