当我鼠标移动到特定div时，在我的背景图像中出现问题

Question

当我将鼠标移到特定的div时，在我的背景图像中出现问题，我想带一个图像，当我a：hover到p1 div。我该怎么做？但是图像应该在p1 div via中，因为我需要给出锚标记。

这是我的HTML

<div class="product">
<div class="p1"><a href="#"><img src="img/dynamic/boysproducts-01.png"/></a></div><!--endof p1-->
<div class="p2"><a href="#">Text Descripition</a></div><!--endof p2-->
</div><!--endofproduct-->

Here is my css


 .product
    {
    width:300px;
    height:auto;
    float:left;
    }

    .p1
    {
    width:300px;
    height:100px;
    float:left;
    background-color:#333333;
    }

    .p1 a
    {
    width:300px;
    height:100px;
    display:block;
    }


    .p1 a:hover
    {
    width:300px;
    height:100px;
    background-image:url(../img/dynamic/girlsproduct-01.png);
    }