html - 当鼠标悬停时，我想将背景图像带到整个 div

Question

当我将鼠标悬停在特定的 div 上时，我的背景图像出现问题，我想在我 a:hover 到 p1 div 时显示图像。我该怎么做？但是图像应该在 p1 div via 中，因为我需要提供 anchor 标记。

 .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);
    }

Answer 1

您可以在没有 :hover 的情况下在 div 中应用层。示例:

.p1  {
background-image: url('transparency.png');
}

.p1  {
background-image: url('theimage.png');
}

应用':hover' 来改变背景并不常见。它似乎没有语义。但是当您对同一属性使用两个不同的值时，情况会变得更糟。

您可以使用 JavaScript，也许是 JQuery，代码与此类似:

function() {
   $('#p1').hover(function(){
     $('#p1').css('background-image','url(image.png)');
     });
 });