One of the challenges I'm facing with my HTML list is that when hovering over each list item, the text along with the bullet point should change color.
Here's the structure:
<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 styling is done with CSS:
ul li:hover {
color:red;
}
When viewed in Microsoft Edge, Internet Explorer, Firefox, and Safari, everything works perfectly. However, there seems to be an issue in Google Chrome where the hovering effect doesn't work as intended. The bullet points don't change color like they should.
Also, clicking on the "Add bullet point" button sometimes causes the color change to stick even after moving the cursor away. Resizing the window temporarily fixes this issue.
I'm looking for a solution to make sure the HTML/CSS code functions correctly across all browsers, especially Google Chrome. Could this be a browser bug or are there workarounds to ensure consistent behavior? Your insights and suggestions would be greatly appreciated.