鼠标悬停时隐藏了很多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的子div（id = mCenter）为目标的（id = main）。您需要使用伪选择器（:hover），这样您的规则才会在主div id悬停时应用。

这条规则可以解决问题：

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

注意：如果您包含多个具有任何给定ID的元素，则此作品并不意味着它的有效html。

Answer 2

将规则添加到样式文件：

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

Answer 3

#main:hover #mCenter
{
    visibility: hidden;
}

** #main是主要的div id id

** #mCenter是你想隐藏div id

Answer 4

JavaScript解决方案：

    var content = "";
    for(var i = 0; i < 5; i++ ){
    content += "<div style='width:100%; padding:3px; padding-bottom:0px; cursor:hand;'><div style='float:right;'> right </div><div class='mCenter' style='float:right;'> center (divs to hide) </div> <div> left </div></div><br/>";
    }
    var el = document.getElementById("main");
    el.innerHTML = content;

    el.onmouseover=function(){    
     var hidediv = document.getElementsByClassName("mCenter");
     for(var k = 0; k < hidediv.length; k++){
        hidediv[k].style.display = 'none';
     }
    };

    el.onmouseout=function(){    
     var hidediv = document.getElementsByClassName("mCenter");
     for(var k = 0; k < hidediv.length; k++){
      hidediv[k].style.display = 'block';
     }
    };

Working Fiddle

CSS解决方案：

您可以使用Pseudo-classes selector来跟踪hover事件。

Tr it：

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

Working Fiddle

Answer 5

您可以使用以下任何一种选项，因为我不确定它是id还是类。 如果mCenter是班级

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

或者mCenter是id

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

或者它是直接的孩子

#main:hover > div { display:none; }