标签存档: dom

无侵入式鼠标经过显示或隐藏效果

js部分:

<script type=”text/javascript”>
function showTag(parentId){
 var parentId= document.getElementById(parentId);
 var childTag= parentId.lastChild;
 while(childTag.nodeType!=1){
  childTag=childTag.previousSibling;
 }
 parentId.onmouseover=function(){
  childTag.style.display=”block”;
 }
 parentId.onmouseout=function(){
  childTag.style.display=”none”;
 } 
}
window.onload= function(){
showTag(“tagId”);//绑定id
}
</script>

html部分:

<div id=”tagId”>
 <div style=”background-color:#333;”>parenttag</div><!–鼠标经过显示此标签下一个兄弟标签的内容–>
    <div style=”background-color:#666;”>childTag</div>
</div>

css:

<style type=”text/css”>
.none{ display:none;}
</style>