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を必要とするものですか？