javascript - 鼠标悬停时隐藏很多div

Question

当鼠标悬停在“main”div 上时，我希望它隐藏所有“mCenter”div。

如果没有 jQuery，我该如何做到这一点？ (使用 JS 或 CSS)

做 id 的唯一性，然后在所有 id 上运行对我来说不是问题。但是没有更好的方法来满足我的需求？

echo "<div id='main'>";     // main div
for ($i=1; $i<100; $i++) {
     echo "<div id='mem.$i' style='width:100%; padding:3px; padding-bottom:0px; cursor:hand;' onmouseover=\"this.style.backgroundColor='#1d1d1d';\" onmouseout=\"this.style.backgroundColor='Transparent';\">
               <div id='mRight' style='float:right;'> right </div>
               <div id='mCenter' style='float:right;'> center (divs to hide) </div>
               <div id='mLeft'> left </div>
          </div><br>";
}
echo "</div>";

Answer 1

只需添加一个 css 规则。您需要制作一个以父 div (id=main) 的子 div (id=mCenter) 为目标的对象。您需要使用伪选择器 (:hover)，以便您的规则仅在主 div id 悬停时适用。

这条规则可以解决问题:

#main:hover #mCenter
{
    display: none;
}

注意:如果您包含超过 1 个具有给定 id 的元素，这有效并不意味着它是有效的 html。