php - 在循环中悬停另一个 DIV 时显示一个 DIV

Question

我试图在悬停另一个 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> 

我真的希望你们能帮助我，因为我尝试了很多时间后仍然无法正常工作。

Answer 1

看来您的 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 上使用相同的 id，它应该是唯一的