Avoid un anchored hovers

When <!DOCTYPE> Strict is set, IE expects the :hover selector to always be anchored with the <a> tag.

Rule Details

Rule ID: non-link-hover

This rule checks that the :hover selector is always anchored with the <a> element otherwise it throws an error, Having un-anchored :hovers can can lead to performance degradation in IE7. IE8 is also affected by this issue but to a lesser degree.

The following patterns will cause an error:

/* :hover is not anchored with an a tag*/
.test :hover{
    top: 10px;
}

.test .event-link:hover {
    top: 10px;
}

The following pattern is considered okay and does not cause an error:

/* :hover is anchored with an a tag*/
.test a:hover{
    top: 10px;
}

.test a.event-link:hover {
    top: 10px;
}

Further reading

(bug report about un-anchored hovers in IE7 and IE8)

https://developers.google.com/speed/docs/best-practices/rendering

http://msdn.microsoft.com/en-us/library/ie/cc848866%28v=vs.85%29.aspx