bastianum bastianum - 6 months ago 11
CSS Question

Showing a DIV while hovering another DIV in a loop

i am trying to show a div when hovering another div. I researched this forum for solutions but i did not find anything that matched my problem, because mine is in a loop from 0 to 9. I know i just missed something really basic, i just cannot find it.

The whole code is PHP, the HTML lines are made with 'echo'.
I want .runestext$i to show up when .runes$i is hovered.
So, for example, when .runes1 is hovered i want to show up .runestext1 ^^
Here is my code:

<?php>
for ($i = 0; $i <= 9; $i++) {

//FROM HERE

if ($i >= 5) {
$top_position = 493;
}
else {
$top_position = 133;
}

if ($i >= 5) {
$r = 18 + 250 * $i - 250 * 5 - 612.5;
}
else {
$r = 18 + 250 * $i - 612.5;
}

$runes = getRunes($summoner_currentgame_specified);


echo "<style> " . ".runes" . $i . "{" .
"position: absolute;
left: " . $r . "px;" .
"top: " . $top_position . "px;
font-size: 16px;
color: #fff;
font-family: Verdana, Friz Quadrata Thin, sans-serif;
font-weight:bold;" .
"</style>";

echo "<div id='a' class=runes" . $i . ">Runes</div>";

echo "<style> " . ".runes" . $i . ":hover" . "{" .
"position: absolute;
background-color: rgba(0, 0, 0, 0.9);
width: 225px;
height: 300px;
margin-left: -21px;
margin-top: -273px;
text-align: center;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;" . "}" .
"</style>";

//TO HERE ALL IS WORKING FINE, just for clarity of the code

echo "<style>" . ".runestext" . $i . "{
font-family: Verdana;
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #fff;
text-decoration: none;
display: none; }" .
"</style>";

echo "<div id='b' class=runestext" . $i . ">RUNESTEXT</div>";

//Here my mistake should be, i just cannot find it:
echo "<style>" . ".runes" . $i . ":hover .runestext" . $i . "{" .
"display: block;" . "}" .
"</style>";
}
</php>


I really hope you guys can help me as i dont get this working after a lot of time of trying.

Answer

It appears your runestext is not a child of runes, which means you need the sibling selector ~ to target it.

// ------------------------------------- ↓
echo "<style>" . ".runes" . $i . ":hover ~ .runestext" . $i . "{" .
       "display: block;" . "}" . 
     "</style>";
}

Side notes

  1. You also miss a rule closure } in this style

    echo "<style> " . ".runes" . $i . "{" . 
          "position: absolute;
            left: " . $r . "px;" . 
          "top: " . $top_position . "px;
           font-size: 16px;
           color: #fff;
           font-family: Verdana, Friz Quadrata Thin, sans-serif;
           font-weight:bold;" . 
         "</style>";
    
  2. Don't use the same id on your div's, it should be unique

Comments