Javascript 将文本居中放置在图像按钮上，同时通过将文本悬停在图像上而不是文本来驱动文本悬停效果

我有一套按钮，我需要文本最终根据国家进行更改。 这意味着我必须使用文本元素作为按钮的一部分。由于按钮具有悬停效果，我需要将文本包含在image div中。 通过使用“”，我可以正确定位文本，但问题是：

答：文本响应图像边界外的指针（这实际上导致单击激活另一个按钮）。 B：如果指针直接放在文本上，只有文本会突出显示（通过悬停效果），而不是按钮。 我正在寻找一种解决方案（通过CSS或JavaScript），使按钮能够正确执行，例如，按钮将响应指针仅悬停在图像上，但仍将突出显示文本（好像文本是图像的一部分，而不是实际分开）。 请注意，由于文本和图像元素是屏幕大小自适应的，因此所有距离和大小必须基于百分比）

参见小提琴： 注意当您将鼠标悬停在图像上方时会发生什么。还请注意，当您触摸图像的边缘与中心时会发生什么

<div id="main_positioning_container">

     <div id="my_account_dashboard_container">

            <div id="contact_information_icon"
                style="color:#292726"
                onMouseOver="this.style.color = '#f48325'"
                onMouseOut="this,style.color = '#292726'" > 
                    <img src="../icons/icon_ContactInforrmation_inactive.png"
                    img         onMouseOver="this.src='../icons/icon_ContactInforrmation_hover.png'"
                    onMouseOut="this.src='../icons/icon_ContactInforrmation_inactive.png'"
                    alt="icon_ContactInforrmation_inactive" 
                    width="100%" 
                    hight="auto"
                    style="margin-bottom: -20%;">
                       <p align="center">Contact Information</p> 
            </div>

      </div>

</div>



#main_positioning_container {
    position:relative;
    width: 100%;
    top: 75px;
    left: 0px;
}

#my_account_dashboard_container {
    visibility:visible;
}

#contact_information_icon {
    position: absolute;
    width: 25%;
    z-index: 3;
    color: #292726;
    font: Kalinga;
    font-size: 100%;
    margin-top: 13.75%;
    margin-left: 7.5%;
    height: 20px;
}

联系信息
#主容器{
位置：相对位置；
宽度：100%；
顶部：75px；
左：0px；
}
#我的帐户仪表板容器{
能见度：可见；
}
#联系人信息图标{
位置：绝对位置；
宽度：25%；
z指数：3；
颜色：#292726；
字体：卡林加；
字体大小：100%；
利润率最高：13.75%；
左缘：7.5%；
高度：20px；
}

你能发布一个包含所有必要代码的小提琴吗？发送提示。我已经添加了一个提琴，并清理了帖子和代码来关注这个问题。我没有看到提琴上的图像或按钮。我不知道为什么-我这方面的工作正常。请尝试重新调整浏览器的大小，并查看图像是否进入视图。在发布之前，我已经检查了两倍和三倍这把小提琴…很可能是因为我这边的图像文件丢失了。。。