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/

在另一个元素的翻转时使用css过渡

1 个答案: