图像悬停效果不适用于文本答案

【问题标题】：Image hover effect doesn't work over text图像悬停效果不适用于文本
【发布时间】：2015-07-01 15:56:45
【问题描述】：

我有一张想要显示为链接的图片。当鼠标悬停在图像上时，我有悬停效果，但我也想在图像上叠加一个文本标签。问题是，当鼠标悬停在文本上时，图像效果停止工作。

我的代码如下。谁能建议我如何解决这个问题？

<html>

<style>
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
                box-sizing: border-box;
    }

    .pic {
        border: 5px solid #FF0000;  
        float: left;
        width: 475px;
        height: 375px;
        margin: 20px;
        overflow: hidden;
        position: relative; 

        -webkit-box-shadow: 5px 5px 5px #C0C0C0;
                box-shadow: 5px 5px 5px #C0C0C0;  
    }

    .grow img {
        width: 475px;
        height: 375px;

        -webkit-transition: all 1s ease;
           -moz-transition: all 1s ease;
             -o-transition: all 1s ease;
            -ms-transition: all 1s ease;
                transition: all 1s ease;
    }

    .grow img:hover {
        width: 570px;
        height: 450px;
    }

    .label {
        top: 150px;
            position:absolute;
            text-align:center;
            font-size:500%; 
            color: FF0000;
            width: 100%;
    }
</style>

<a href="MyLink.html">
    <div class="grow pic">
        <img src="MyImage.jpg" alt="TITLE">
        <div class="label">TITLE</div>
    </div>
</a>

【问题讨论】：

标签： html css hover

【解决方案1】：

您可以尝试禁用指针事件：

.label { pointer-events:none; }

【讨论】：

【解决方案2】：

您的悬停只是在您的图像上，将悬停应用到 div。

示例：

.grow:hover img {
    //styles
}

【讨论】：