Weird CSS hover behavior

ionic-v1
1

Hi guys,

I’m experiencing a totally weird CSS hover bug(?). To demonstrate the issue I created this Codepen. It is based of the blank starter. I didn’t add much, just an ionic-style list and one :hover rule to change the background color of a bare button.

The problem. The background of button 1 “often” changes its color, even though another button is hovered. I tested this in Chrome and Firefox (both latest versions) on Windows 8.1.

Do you have any idea what’s going on?

HTML

<div class="list">
  <label class="item">
    <div class="input-label">
      Hover over any of the buttons
    </div>
    <div class="button-bar2">
      <button class="button2">1</button>
      <button class="button2">2</button>
      <button class="button2">3</button>
      <button class="button2">4</button>
      <button class="button2">5</button>
      <button class="button2">6</button>
      <button class="button2">7</button>
    </div>
  </label>
 </div>

CSS

.button-bar2 > .button2:hover {
  background-color: tomato;
}

Best Regards,
Martin

2

I think I figured out what’s going on. It has to do with the label element! The browser thinks the first button corresponds to the outer label element. Hence it inherits its hover state.

So, changing the label element to a div solved the issue.

Hope this helps somebody anyway!