我试图在悬停另一个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>
我真的希望你们能帮助我,因为经过很多时间的尝试,我不会让它工作。
你的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>";
不要在你的div 上使用相同的 id,它应该是唯一的