CSS在悬停时更改内容

Question

我的内容中有一些图标，如果我将鼠标悬停在其中一个图标上，那么图标周围会出现圆形图像，或者图标会变得更大：

我试过了：

.pic2
{
    z-index:100;
    position:absolute;
    left:64%;
    bottom:44%;
}

.pic2:hover{
background-image:url("slicingimages/media/icon_highlight.png");
}

我的内容：

   <div id="content">
        <p2>
            <content class="contentUpper"><img src="SlicingImage/Images/alacards_coupons_illustration.png"> </img></content>
            <content class="text" id="user2">ONE PLACE TO GET REWARDS</content>
            <div><img class="pic2" src="SlicingImage/Media/gift_icon.png" height="8%" width="4%"><img></div>
            <div><img class="pic4" src="SlicingImage/Media/browser_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic5" src="SlicingImage/Media/twitter_icon.png" height="8%" width="4%"></img></div>
            <div><img class="pic6" src="SlicingImage/Media/facebook_icon.png" height="8%" width="4%"></img></div>
            <content class="text" id="user4">FROM YOUR LOYAL BRANDS</content>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example10');return false;">
            <img class="back" src="SlicingImage/prev_button.png"></a></img></div>
            <div><a href="#" id="user" class="showLink" onclick="showHide('example12');return false;">
            <img class="next" src="SlicingImage/next_button.png"></img></a></div>
            <content class="text" id="homeNext"> With all your loyality card, reward points, coupons & discount vouchers </div>
        </p2>    
   </div>

Answer 1

它不起作用的原因是因为.pic2在html中有一个图像标记。它占据了整个元素。所以悬停的背景是正常的，它只是没有显示，因为图像在它前面！

为了实现这一点，只需使用CSS，您就需要使用背景图片而不是html图片标记。

例如，您将删除此

<img src="SlicingImage/Media/gift_icon.png" height="8%" width="4%">

并将其添加到.pic2

.pic2
{
    background-image: url("SlicingImage/Media/gift_icon.png");
}

并保持.pic2：悬停相同的

Answer 2

你想在较小的悬停时显示更大的图像吗？如果这是您的问题，您可以尝试CSS以下。

.thumbnail
{
    background-image:url('/somesmallimgpath.png');
}


.thumbnail:hover
{
    background-image:url('/somebigimgpath.png');
}

Answer 3

这是使用Image Sprites（例如包含多个图标的图像）并在悬停时将一个图标换成另一个图标的示例。

您需要删除前景图像并仅使用背景图像（否则它将显示在背景图像上，您将看不到任何更改）。当您进行此更改时，不需要使用IMG标记，因为您可以将背景图像应用于任何内容。

您可以在此JSFIDDLE中看到它的实际效果。

.pic2{
    background-image:url("http://i.stack.imgur.com/LOxx3.jpg");
    background-repeat: no-repeat;
    background-position: left -16px center;
    display: inline-block;
    width:  46px;
    height: 46px;
    margin: 23px;
}
.pic2:hover{
    background-position: left -178px center;
    width: 92px;
    height: 92px;
    margin: 0px;
}

Answer 4

您可以使用以下代码

.pic2:hover{
       border:5px;
       //Your code
  }