Databases
StackOverflow2013
Postsdbo
POCentering text over an IMAGE BUTTON, while driving the text hover effect from hovering over the image- not the text
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCentering text over an IMAGE BUTTON, while driving the text hover effect from hovering over the image- not the text
    text
    copied!<p>I have a set of buttons in which I need the text to - eventually - change based on country. This means that I have to use a text element to be part of the button. Since the button has hover effect, I need the text to be contained inside the image div. By using the "", I get the text to be position correctly, but the problems are: </p> <p>A: the text responds to the pointer way outside the image boundary (which actually causing the click to activate a different button. B: if the pointer is placed directly over the text, only the text get highlighted (through the hover effect), but not the button. I am looking for a solution (either via CSS or JavaScript) that will make the button perform correctly e.g. the button will respond pointer hover over to the image only, but will still highlight the text (as if the text was part of the - and not separate as it actually is). Note that since the text and image elements are screen-size adaptive, all distances and sizes must be percentage based)</p> <p>See Fiddle <a href="http://jsfiddle.net/HypeTsu/E3fr7/2/" rel="nofollow">HERE</a>: Note what happens when you hover just on top of the image. Also note what happens when you touch the edges of the image VS the center... </p> <pre><code>&lt;div id="main_positioning_container"&gt; &lt;div id="my_account_dashboard_container"&gt; &lt;div id="contact_information_icon" style="color:#292726" onMouseOver="this.style.color = '#f48325'" onMouseOut="this,style.color = '#292726'" &gt; &lt;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%;"&gt; &lt;p align="center"&gt;Contact Information&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; #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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload