I am currently working with a code snippet that looks like this:
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
In addition, I have CSS styling for the pinlabel element:
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
However, I am facing an issue where the hover state is not working as expected. When I manually force the hover state using Chrome developer tools, everything works fine, but it does not work when my mouse is actually over the element. What could be causing this problem? Additionally, I am trying to position the span element under the div, but it always appears on top and covers the background image of the div. Any suggestions on how to fix these issues would be greatly appreciated!