2

I have an HTML list such that when hovering over each list item, the text along with the bullet point will change color.

The HTML

<ul>
   <li>A bullet point</li>
   <li>Another bullet point</li>
   <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>

The CSS

ul li:hover {
   color:red;
}

JSFiddle

The output should look like this, which works properly with Microsoft Edge, Internet Explorer, Firefox, and Safari.

Working list hover

Google Chrome, however, seems to render the hovering incorrectly. For one, the bullet points aren't changing color.

Google Chrome list hover

And when clicking the "Add bullet point" button, the bullet point sometimes changes color, but when it does, it stays that way even when moving the cursor out. Resizing the window seems to fix this.

Stuck bullet hover

So how I can make the HTML/CSS work as it should in Google Chrome? My instinct is that since the stuck bullet point color can correct itself, this might be a browser bug. If so, are there any workarounds? If not, how can I fix the code?

Community
  • 1
  • 1
Applecot
  • 239
  • 1
  • 2
  • 9
  • After upgrading to Chrome 49, my JSFiddle works properly. Therefore, I can conclude that this was probably a Google Chrome bug. – Applecot Mar 03 '16 at 00:09

1 Answers1

3

Here is a trick you can use

ul li:hover {
  color:red;
}
li:before {
  content: "• ";
}
ul {
  list-style: none;
}
<ul>
    <li>A bullet point</li>
    <li>Another bullet point</li>
    <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • @Pangloss So right ... had it like that in my own code piece so it kind of came along :) – Asons Feb 05 '16 at 22:27