What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 134 Stack Exchange communities.

A seemingly recent change to the CSS for chat has caused an annoying behavior; the timestamp div takes mouse focus when you're looking to interact with the reply/star/flag UI elements on the right side of the message.

To reproduce:

  1. Find a one-line message with a timestamp.
  2. Move your mouse onto the timestamp from above as if you were going to try to interact with the UI elements in the same location, which appear on message mouseover

The UI elements don't appear at all until you mouse off the timestamp; the timestamp div keeps focus and the message div never gets it to trigger the mouseover. Behavior in the transcripts is the same, though those UI elements don't exist in that context.

Confirmed on Chrome 17, as well as by several others in Server Fault's chat, including a Stack Exchange employee; unsure of the other browsers.


The CSS has a statically-defined z-index:1 for .timestamp, causing the timestamp div to take focus. Easy fix; changing it to 0 or removing it completely (setting it to auto) resolves the issue.

share|improve this question
    
I think I've noticed it for a day or two myself... –  Holocryptic Jan 27 '12 at 22:32
2  
Yeah, noticed it myself. It was indeed a recent change; I'll fix that shortly. –  balpha Jan 27 '12 at 22:46
    
That is driving me batty. I have to sneak up on the buttons now! –  freiheit Jan 27 '12 at 22:48

2 Answers 2

up vote 5 down vote accepted

Easy fix; changing it to 0 or removing it completely (setting it to auto) resolves the issue.

Well, wouldn't it be great if everything was so easy. But the z-index actually has a purpose, believe it or not.

And there's not really a nice way to make the time stamp not catch the hovering, since the whole purpose of the z-index was it being above the message.

So since we can't stop the time stamp from stealing the mouse, we have to say "if the mouse is over the timestamp, pretend it's over the message".

Fortunately, the DOM (simplified) looks like this:

<div class="monologue">
    <div class="timestamp">21:42</div>
    <div class="message">
        <!-- first message -->
        <div class="meta"><!-- this is the flag/star thingy --></div>
    </div>
    <div class="message">
        <!-- second message -->
        <div class="meta"></div>
    </div>
</div>

Which gave me the opportunity for the first time in my life to use the "Adjacent sibling combinator" selector, which works because the time stamp is right before the first message, and the first message is the only one having this issue.

.message:hover { /* styles */ }

turns into

.message:hover, .timestamp:hover + .message { /* styles */ }

and all is well again.

share|improve this answer
1  
-1. Not enough jQuery. –  Matt Jan 30 '12 at 15:13
    
Thanks for the technical details. Now, how do I close as dupe for related questions on SO? –  Won't Jan 30 '12 at 16:37

Sneak up on the post and attack it from the bottom or the left. It will never know what hit it!

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .