9

I noticed some rather odd behavior when moving the cursor over links to answers displayed in my user profile:

enter image description here

I opened Firebug to see if I could determine exactly what was going on here. The cause of the problem was not immediately obvious but it turned out to be a typo.

Here are the HTML elements for one of the answer links:

<td title="..." class="answer-hyperlink">
    <a class="answer-hyperlink " href="...">
        How to set C++11 as my default compiler?
    </a>
</td>

Notice that both the <td> and the <a> use the .answer-hyperlink class. What exactly is in the declaration for this CSS class?

.question-hyperlink:hover, .answer-hyperlink:hover {
    border-bottom: 1px dotted #666;
    text-decoration: none;
}

So we've got a rule here that puts a dotted border along the bottom of both the <td> and the <a> when they are hovered over. But then how come this doesn't happen for the links in the question section?

Here's where things get fun. There's another CSS rule that should override that one:

.user-page .question-hyperlink:hover, .user-page answer-hyperlink:hover {
    border-bottom: medium none;
    text-decoration: underline;
}

See the subtle bug in there? answer_hyperlink should probable be .answer-hyperlink (a class not an element). Once this typo is fixed, everything works as expected.

You must log in to answer this question.

Browse other questions tagged .