Question

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

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

请参阅小提琴HERE：请注意当您将鼠标悬停在图像顶部时会发生什么。另请注意当您触摸图像边缘VS中心时会发生什么......

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

将文本居中于图像按钮，同时将文本悬停效果悬停在图像上而不是文本上

0 个答案: