Отображение DIV во время наведения другого DIV в цикле

я пытаюсь показать div при наведении другого div. Я искал этот форум для поиска решений, но я не нашел ничего, что соответствовало бы моей проблеме, потому что у меня цикл от 0 до 9. Я знаю, что я пропустил что-то действительно простое, я просто не могу его найти.

Весь код PHP, строки HTML сделаны с помощью «echo».
Я хочу, чтобы .runestext $ i показывался, когда .runes $ i завис.
Так, например, когда .runes1 обнаружен, я хочу показать .runestext1 ^^
Вот мой код:

<?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>

Я действительно надеюсь, что вы, ребята, сможете мне помочь, так как я не получаю эту работу после долгого времени попыток.

2

Решение

Кажется твой runestext не дитя runes, что означает, что вам нужен селектор брата ~ нацелиться на это.

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

Примечания стороны

  1. Вы также пропустите закрытие правила } в этом стиле

    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. Не используйте один и тот же идентификатор вашего div’а, он должен быть уникальным

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]