Change div image AND text on hover with one link
<p>I have a DIV that needs to change the opacity of an image on rollover AND the color of the text. At the moment rolling over the image triggers the image opacity but has no effect on the text and vice versa.</p>

<pre><code>&lt;a href="#"&gt;
    &lt;div id="promo-box"&gt;
        &lt;div class="promo-box-image"&gt;
        &lt;img src="img.jpg" /&gt;
        &lt;/div&gt;
        &lt;div class="promo-box-content"&gt;
        Text Content
        &lt;/div&gt;
     &lt;/div&gt;                       
&lt;/a&gt;

.promo-box-image {
    opacity: 0.7;
}
.promo-box-image:hover {
    opacity: 1;
}
.promo-box-content {
    color: #fff;
}
.promo-box-content:hover {
    color: #ffcc00;
}
</code></pre>

<p>Any idea to make both events happen via rolling over ANY part of the outside DIV/href?</p>