0

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

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

请参阅此处的小提琴：注意将鼠标悬停在图像顶部时会发生什么。另请注意，当您触摸图像的边缘 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;
}
4

0 回答 0