鼠標懸停時隱藏很多div

鼠標懸停在「主」div上時，我希望它隱藏所有'mCenter'div。鼠標懸停時隱藏很多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>";

來源

2014-05-06 user3572805

id屬性應該是唯一的。 – Wex

@Wex對我來說不是問題，我做的是獨特的id，然後在所有的id上運行。但沒有更好的方法去做我需要的東西？ – user3572805

mRight，mCenter，mLeft，您可以將其作爲課程。只是我的意見。 –

只需添加一條css規則即可。您需要創建一個將父級div（id = main）的子div（id = mCenter）作爲目標的子級。您需要使用僞選擇器（:hover），以便您的規則僅在主要div id懸停時應用。

此規則將這樣的伎倆：

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

注：事實上，這部作品並不意味着其有效的HTML，如果你有任何給定的ID超過1元。

來源

2014-05-06 05:59:44 enhzflep

exatly我需要！謝謝！ – user3572805

添加規則樣式文件：

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

來源

2014-05-06 06:05:44 4EACH

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

**＃主要是主要的div的ID

**＃mCenter是你想隱藏DIV ID

來源

2014-05-06 06:17:09

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

來源

2014-05-06 07:09:14

您可以使用以下任何選項，因爲我不知道它閹的ID或類。如果mCenter是

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

類，或者mCenter是ID

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

或它的一個直接子

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

來源

2014-05-09 13:32:14

回答

相關問題