ループ内で別のDIVをホバリングしているときにDIVを表示

Question

別のdivをホバリングするときにdivを表示しようとしています。私は解決のためにこのフォーラムを調査したが、私の問題に合ったものは見つけられなかった。なぜなら、私は0から9までのループに入っているからだ。私はちょうど本当に基本的なものを見逃した。

コード全体がPHPで、HTML行が 'echo'で作成されています。 .runes $ iが動かされたときに.runestext $ 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>"; 
} 

サイドはあなたにもこのスタイルで

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>"; 

をルール閉鎖}を欠場

1. があなたのdivの上で同じIDを使用しないでください、それがあるべきノートユニーク