Chat: timestamp div incorrectly taking mouse focus

Question

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.

Answer 1

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.

Answer 2

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