Text will not highlight and :hover does not work

Question

On the following page, http://duncanmorley.com/ there are the following issues:

One cannot highlight text within the document
When a user hovers over an object with the ":hover" property applied,in the CSS file, the hover effect doesn't happen (See social icons at the top) (class="fb")

It seems that there is a transparent object over the page which is not allowing the user to interact with the elements. I'm unsure what this is, as there is nothing in the CSS file (that I can see) that suggests this is the issue.

I believe these issues are likely the result of one problem.

What browser/os are you looking at it in? I briefly viewed it on Firefox/PC and seemed to work fine in regards to text highlighting and hovering over first facebook icon. — Don Boots, Sep 04 '14 at 20:13

score 2 · Accepted Answer · edited May 23 '17 at 10:26

text-indent: -99999999px; causes the issue here because it will modify the area hover works, too.

Fix for the Facebook share button (an example)

Remove the text-indent style from the fb class and change <li class="fb">Facebook</li> to <li class="fb"><span class="hide">Facebook</span></li>

Now you can style the text the sr-only way:

.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

At the end you should get the same effect, the "Facebook" text will be hidden for the visual presence and the hover effect will work on the entire element.

This is hugely odd. By having an text indent that's too large, I caused 1)The text on my web page not to be selectable and made the :hover function not work. — Adam Scot, Sep 05 '14 at 17:08

score 1 · Answer 2 · answered Sep 04 '14 at 20:32

1

Oddly enough, your text-indent is too large. If you make it -9999999px instead, Chrome seems to like it better.

answered Sep 04 '14 at 20:32

Don Boots

2,028
2
18
26

Text will not highlight and :hover does not work

2 Answers2