Hola, quisiera poder cambiar una imagen al pasar el cursor sobre el contenedor pero no lo logro
Este es el html:
Código HTML:
<div id="nav" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a class="DQ" href="#"><?php echo $this->Html->image('dairy_queen_deashboard_logo.png', array('alt' => 'DQ', 'border' => '0', 'data-src' => 'holder.js/100%x100', 'align' => 'center', 'width' => '55%', 'height' => '55%')); ?> </a><hr/>
</li>
<li>
<a class="BDP" href="#">powered by <?php echo $this->Html->image('login_BDP_logo.png', array('alt' => 'BDP', 'border' => '0', 'data-src' => 'holder.js/100%x100', 'align' => 'right', 'width' => '40%', 'height' => '40%')); ?> </a><hr/>
</li>
<li>
<a href="/"><img id="img1"/><br/>DASHBOARD</a>
</li>
<li>
<a href="#"><img id="img2"/><br/>NEW ORDER</a>
</li>
<li>
<a href="#"><img id="img3"/><br/>MY ORDERS</a>
</li>
<li>
<a href="#"><?php echo $this->Html->image('menu/icon__0000s_0000_camera-hover.png', array('alt' => 'BDP', 'border' => '0', 'data-src' => 'holder.js/100%x100', 'align' => 'center', 'width' => '56px', 'height' => '43px')); ?><br/>PHOTO BANK</a>
</li>
<li>
<a href="#"><img id="img5"/><br/>MY PROFILE</a>
</li>
</ul>
</div> EL CSS:
Código HTML:
#img2 {
content: url('../img/menu/icon__0001s_0001_plus.png');
background-repeat: no-repeat;
background-position: center;
border: 0px solid #fff;
width: 47px;
height: 46px;
}
#img2:hover {
content: url('../img/menu/icon__0000s_0001_plus-hover.png');
}
De esta forma cambia la imagen pero solo al pasar el cursor por encima de ella, lo que necesito es que cambie al pasar el cursor por el contenedor de la imagen (li).