如何像当当网一样，鼠标移动到子标签LI的时候，父标签LI依旧有过渡的效果

Question

如何像当当网一样，鼠标移动到子标签LI的时候，父标签LI依旧有过渡的效果、
详细可以当当当网看下那个菜单，百货那个栏目鼠标移动到百货的子类目时候，百货的边框依然高亮

Answer 1

function baimouseOver() {
    sug_gid('a_baihchannel').className = "goods hover";
    sug_gid('__ddnav_guan').style.display = "block";
}
function baimouseOut() {
   sug_gid('a_baihchannel').className = "goods";
   sug_gid('__ddnav_guan').style.display = "none";
}
就是这两个函数，给ul和弹出的div（分类列表）都绑定了onmouseover、onmouseout事件。也就是说，鼠标在子标签div触发onmouseover时，也给"百货"标签设置了hover样式。

Answer 2

如果要拆当当网的很简单，我想一个更简单的，直接判断，激活样式以下是当当网的
var sug_gid=function(node){
return document.getElementById(node);
}
var sug_gname=function(node){
return sug_gid("suggest_key").getElementsByTagName(node);
}
//关于div显示
function showwindownewtop(obj,objdiv,addx,addy){    var x=getposOffset(obj,'left');
    var y=getposOffset(obj,'top');
    var div_obj=document.getElementById(objdiv);
div_obj.style.left=(x+addx)+'px';
div_obj.style.top=(y+addy)+'px';
if(div_obj.style.display=="none"){
div_obj.style.display="inline";}
else{
div_obj.style.display="none";
}
}//--------------------header---------
//操作条菜单
function showgaoji(aid,did){
    var obj = document.getElementById(aid);
    var divotherChannel=document.getElementById(did);
    obj.className="menu_btn hover";
    divotherChannel.style.zIndex = 1000 ;
    divotherChannel.style.display = "block";
}function hideotherchannel(aid,did){
    var divotherChannel=document.getElementById(did);
    var mydd=document.getElementById(aid);
    if(divotherChannel.style.display!="none"){
            divotherChannel.style.display="none";
            mydd.className="menu_btn";
    }
}
//-------------category start---------
var timecolsecategory;
var issettime=false ;
function showCategory(aid,did,json_url){
    var divotherChannel=sug_gid(did);
    divotherChannel.style.display = "block";
    sug_gid(aid).className = "ddnewhead_category";
    if(!menudataloaded){
        loadCategoryJson(json_url);
    }
}function hiddenCategory(event,did){
    var obj=sug_gid(did);
    var obj2= sug_gid("a_category");
    if(isMouseLeaveOrEnter(event, obj)&&isMouseLeaveOrEnter(event, obj2)){
        issettime=true ;
        timecolsecategory=setTimeout(function(){
            obj.style.display="none";
            obj2.className = "ddnewhead_category ddnewhead_category_unit";
            for(i=1;i<16;i++){
                if(sug_gid('__ddnav_sort'+i)){
                    sug_gid('__ddnav_sort'+i).style.display="none";
                    sug_gid('li_label_'+i).className="";
                }
            }
            },100);
        }
 }function baimouseOver(){
    sug_gid('a_baihchannel').className = "goods hover";
    sug_gid('__ddnav_guan').style.display = "block";
}
function baimouseOut(){
   sug_gid('a_baihchannel').className = "goods";
   sug_gid('__ddnav_guan').style.display = "none";
}var timecolsediv;
var timestartdiv;
var showindex = 99 ;
var menudataloaded=false;
function amouseOver(index,mid2,obj,evt,key,type){
    if(!menudataloaded)return;
     CreateCategory(index,key,mid2,type);    showindex = index ;
    if(isMouseLeaveOrEnter(obj,evt)){
        clearTimeout(timecolsediv);
        if(issettime)
            clearTimeout(timecolsecategory);
        if(mid2!=1){
            sug_gid('a_category').className = "ddnewhead_category";
        }
        if(mid2==1){
            sug_gid('a_category').className = "ddnewhead_category ddnewhead_category_homepage";
        }
        timestartdiv=setTimeout(function(){
        if(showindex != index){
            return ;
        }
        for(i=1;i<16;i++){
            if(sug_gid('__ddnav_sort'+i)){
                sug_gid('__ddnav_sort'+i).style.display="none";
                sug_gid('li_label_'+i).className="";
            }
        }
        sug_gid('li_label_'+index).className = "hover";
        var obj = sug_gid('__ddnav_sort'+index);
        if(obj.style.display =='none'){
            if(index==1){
                obj.style.display = "block";
                return ;
            }
            obj.style.display = "block";
            var movetop=((index-1)*30);
            if(index>8){
                movetop=((index-5)*30)-1;
                obj.style.top = "-"+movetop+"px";
            }else{
                obj.style.top = "-"+movetop+"px";
            }        }
       },100);
    }
}
/*公用部分*//*顶部导航*/
.ddnewhead_content .ddnewhead_topnav { float:left;display:inline;width:788px;}.ddnewhead_mainnav {float:left;display:inline;width:auto;height:30px;}
.ddnewhead_mainnav li { float:left;display:inline;height:30px;margin-right:5px;}
.ddnewhead_mainnav a { display:block;width:77px;height:30px;background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat 0 -50px;color:#4e4e4e;font-weight:bold;font-size:14px;line-height:20px;text-align:center;text-decoration:none;}
.ddnewhead_mainnav li a {font-size:14px;}
.ddnewhead_mainnav a span{ display:block;padding:6px 5px 4px 11px;height:20px;*padding:7px 5px 2px;letter-spacing:5px;text-align:center; color:#4e4e4e}
.ddnewhead_mainnav a:hover { color:#4e4e4e;text-decoration:none;background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -100px -50px;}
.ddnewhead_mainnav a:hover span { color:#4e4e4e;cursor:pointer;}.ddnewhead_mainnav a.nonce, .ddnewhead_mainnav a.nonce:hover  { width:59px;background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -200px 0;color:#fff;}
.ddnewhead_mainnav a.nonce span,.ddnewhead_mainnav a.nonce:hover span {color:#fff;}
.ddnewhead_mainnav .book {margin:0;padding:0;width:77px;color:#105f4b;}
.ddnewhead_mainnav .book span,.ddnewhead_mainnav .book:hover,.ddnewhead_mainnav .book:hover span {color:#105f4b;}
.ddnewhead_mainnav .guan {padding:6px;padding-bottom:0;letter-spacing:0;text-align:center;}.ddnewhead_mainnav a.home {background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat 0 0;color:#404040;}
.ddnewhead_mainnav a.home:hover {background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -100px 0;color:#404040;}
.ddnewhead_mainnav a.home span,.ddnewhead_mainnav a.home:hover span{color:#404040;}.ddnewhead_mainnav a.active,.ddnewhead_mainnav a.active:hover  {background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -200px -50px;color:#fff;}
.ddnewhead_mainnav a.active span,.ddnewhead_mainnav a.active:hover span  {color:#fff;}.ddnewhead_mainnav .ddnewhead_goods {position:relative;overflow:visible;z-index:11000;}
.ddnewhead_mainnav .goods {background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -300px 0;}
.ddnewhead_mainnav a.goods:hover, .ddnewhead_mainnav a.hover {position:relative;background:#fff url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -400px 0;cursor:default;z-index:500;}
.ddnewhead_mainnav .goods span {padding-left:5px;*padding-left:0;}
.ddnewhead_mainnav a.goods:hover span { cursor:default;}/*百货浮窗*/
.ddnewhead_mainnav .ddnewhead_goods_panel {display:none;position:absolute;top:28px;width:352px;height:113px;background:#fff url("http://img4.ddimg.cn/header/header2010/unite_header_bg_1101.gif") repeat-x scroll 0 97px;border:1px solid #ee7304;z-index:400;overflow:hidden;}
.ddnewhead_mainnav .ddnewhead_goods_panel ul {float:none;margin:0;padding:6px;width:338px;height:99px;border:1px solid #fc883b;overflow:hidden;}
.ddnewhead_mainnav .ddnewhead_goods_panel li {padding-left:2px;width:336px;height:23px;line-height:23px;border-bottom:1px solid #f0f0f0;overflow:hidden;}
.ddnewhead_mainnav .ddnewhead_goods_panel li a{ float:left;display:inline;margin:0;padding:0 15px 0 21px;width:48px;height:23px;font-weight:normal;font-size:12px;line-height:23px;background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -189px -197px;text-decoration:none;color:#404040;text-align:left;}
.ddnewhead_mainnav .ddnewhead_goods_panel li a:hover {color:#f60;text-decoration:underline;background:url(http://img4.ddimg.cn/header/header2010/unite_header_1101.gif) no-repeat -189px -197px;}
.ddnewhead_mainnav .ddnewhead_goods_panel .ddnewhead_goods_panel_list_last {border:none;}
.ddnewhead_mainnav .ddnewhead_brand {position:relative;z-index:100;}
.ddnewhead_mainnav .ddnewhead_brand .new {display:block;width:25px;height:14px;position:absolute;right:0;top:-10px;background:url(http://img4.ddimg.cn/header/header2010/new2.gif) no-repeat 0 0;_right:-1px;}
.ddnewhead_mainnav .ddnewhead_goods_panel li a.hot{color:#f60;}

Answer 3

事实上，就是这么简单，你可以用Safari或Chrome的JS控制台下输入下面的代码，然后把鼠标移到"百货"标签就能看到了。。
document.getElementById('__ddnav_guan').onmouseover = function() {
    sug_gid('a_baihchannel').className = ''; this.style.display = 'block'; 
}