CSS Mouseover with Text box has copy showing over it - Support

Tagged: popup, position, z-index

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 16, 2015 at 7:34 am #474089

jenlioness
Participant

Hi Guys!

Thanks for any help you can give!!

I have added a Text Box on mouseover to a link and it seems the text box is on the bottom layer of the page, so some text at the bottom of the page is overlaying it. The CSS for the mouseover (span.dropt) includes z-index and I changed that up and down, but was not able to have the popup box be on top. Can you help with this? Here is the CSS code and link to show you the issue, hover over the “Learn More” and “Fact Fund Sheet” to see what I’m talking about:

span.dropt {border-bottom: thin dotted; background: #ffffff; margin: 8px;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index:6;}
span.dropt span {position: absolute; right: -9999px;
margin: 20px 0 0 0px; padding: 3px 3px 3px 5px;
border-style:solid; border-color: #666666; border-width:1px; z-index:6;}
span.dropt:hover span {left: 1%; background: #ffffff;}
span.dropt span {position: absolute; right: -9999px;
margin: 20px 0 0 0px; padding: 3px 3px 3px 5px;
border-style:solid; border-color: #666666; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 0px; background: #ffffff; z-index:6;}

Link to page: http://hriver.spottedmoondesigns.com/

Thanks!
Jennifer

July 17, 2015 at 1:02 pm #474889

Andy
Inactive Moderator

Hi jenlioness!

not sure if I fully understand, because I can’t see anything when hovering over “learn more” and “fun fact sheet”. The buttons just get highlighted (which is normal behavior to me). So what are you trying to achieve exactly? Could you show us an example or screenshots? use imgur or dropbox.

Best regards,
Andy

August 1, 2015 at 6:03 am #481634

jenlioness
Participant

Hi Andy,

I’m back to trying to make this work: I have a link that needs to have a popup window on hover for a risk disclosure. I have set up a span with CSS, but even though I have the background specified as #ffffff, it seems like the order of elements has this on the bottom so when the hover window open up there is copy from the bottom of the page that is over the hover window. I need to have only the copy in the hover window showing when it is open. There is also z-index specified and I have tried changing this, but doesn’t help.

Here is the link to the page, hover over “Learn More” in the sidebar to see what I am talking about.
http://hriver.spottedmoondesigns.com/

Maybe there is an easier, or better, way to accomplish what I am trying to do, if so any help would be sooooo appreciated.
Thanks, Jennifer

Here is the CSS I’m using:
span.dropt {border-bottom: thin dotted; background: #ffffff; margin: 8px;}
span.dropt span {position: absolute; right: -9999px; margin: 20px 0 0 0px; padding: 3px 3px 3px 5px; border-style:solid; border-color: #666666; border-width:1px; background: #ffffff;}
span.dropt:hover span {left: 1%; background: #ffffff;}
span.dropt span {position: absolute; right: -9999px; margin: 20px 0 0 0px; padding: 3px 3px 3px 5px; border-style:solid; border-color: #666666; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 0px; background: #ffffff;}

Here is the code in the sidebar widget:
<span class=”dropt” title=””>Learn More
<span style=”width:250px; font-size: 13px; line-height: 1.2em; font-weight: bold; font-style: italic; color: #000000; background: #ffffff;”>There can be no guarantee that any strategy (risk management or otherwise) will be successful. All investing involves risk, including loss of principal.
Performance quoted represents past performance for the Fund’s institutional class shares and there is no guarantee of future results. The investment return and principal value will fluctuate so that shares, when redeemed, may be worth more or less than the original cost. Current performance may be higher or lower than the performance data quoted above. Please call 800-497-2960 to obtain current and the most recent month-end performance data.</span>

August 3, 2015 at 6:35 am #481890
Ismael
Moderator
Hey!

You can adjust the z-index property of the column:
```
.flex_column.av_one_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-9.el_after_av_three_fourth.el_before_av_one_full {
    z-index: 9999;
}
```
Regards,
Ismael
August 4, 2015 at 4:18 am #482480

jenlioness
Participant

That worked great Ismael, thank you so much!!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘CSS Mouseover with Text box has copy showing over it’ is closed to new replies.