When trying to apply a class to an li element during a hover event, I encountered some difficulties. Below is the code that works without the class:
#leaderboard li:hover {
z-index:1000;
-webkit-transform: scale(3.2);
-moz-transform: scale(3.2);
-ms-transform: scale(3.2);
-o-transform: scale(3.2);
transform: scale(3.2);
}
However, the following code does not work as expected:
#leaderboard li.0:hover {
z-index:1000;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Here is the HTML snippet:
<ul id="leaderboard" name="leaderboard">
<li class="0" style="left: 0px;"><h1 style="display:inline" id="user-234">4900</h1> <img style="height:50px" src="serveurtopmc.jpg"> xxx</li>
... (continued list items)
If anyone knows the correct syntax for this issue, please share it with me :)
==========
After some trial and error, I was able to successfully implement the solution thanks to mcabrams! It involved using the selector #leaderboard li.rank0:hover. Good to go now!