Скрыть много divs при наведении указателя мыши

Question

Когда мышь над «основным» div, я хочу, чтобы он спрятал все «mCenter» div.

Как это сделать без jQuery? (с JS или CSS)

Для меня нет проблемы с уникальным идентификатором, а затем для запуска всех идентификаторов. Но нет лучшего способа сделать то, что мне нужно?

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 = mCenter) родительского div, (id = main). Вам нужно использовать псевдоселектор (:hover), чтобы ваше правило применялось только тогда, когда основной идентификатор div зависел.

Это правило будет делать трюк:

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

Примечание: тот факт, что это работает, не означает, что его действительный HTML, если вы включите более чем 1 элемент с любым заданным идентификатором.

Answer 2

Добавить правило стилевого файла:

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

Answer 3

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

** # основной является основным ДИВ ИД ИД

** # 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 него:

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

Working Fiddle

Answer 5

Вы можете использовать любой из вариантов ниже, так как я не уверен, что кастрированный баран это идентификатор или класс. если mCenter является класс

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

или если mCenter это идентификатор

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

или это непосредственный ребенок

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