鼠标悬停时隐藏很多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

回答

相关问题