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

Question

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

我的代码如下。有人能建议我怎么解决这个问题吗？

<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>

​

Answer 1

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

.label { pointer-events:none; }

Answer 2

你的鼠标悬停在你的图像上，将鼠标悬停应用于div。

示例：

.grow:hover img {
    //styles
}