鼠标悬停<a>链接下<li>显示_css li:hover下面的a显示-CSDN博客

本文链接：https://blog.csdn.net/masuwen/article/details/79216226

<td>

<a> 练习一</a>

<a> 练习二</a>

<a class='kc-lx' οnmοuseοver='MM_over(this)' οnmοuseοut='MM_out(this)'>
    练习三
<div id="popup" style="display: none;">
	<ul>
		<li>
		<p οnclick="javascript:lx(-1,12,"Y",5069);">
			选择题
		</p>
		</li>
		<li>
		<p οnclick="javascript:lx(5077,12,"Y",5069);">
			案例测试题
		</p>
		</li>
	</ul>
</div>
</a>
<td>

//实现功能: 当鼠标悬停到<a> 上, 展示<a>下的所有<li>菜单,

// children() 方法返回被选元素的所有直接子元素。
function MM_over(mmObj) 
{
    var $mmObj=$(mmObj);  
    $mmObj.css("position","relative");
    var $mSubObj= $mmObj.children().first();
   
    var $td=$mSubObj.parent().parent();
    if( $td.children().length=='3')
    {
    	$mSubObj.attr("style","left:-65px;");//若是第三个<a>,则设置其样式
    }
    $mSubObj.show();	
}

/*-----弹出框-----*/
#popup{width:130px;height:auto;background:#fff;border:1px #dddddd solid;display:none;position:absolute;left:0px;top:24px;z-index:5;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*兼容ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*兼容firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*兼容safari或chrome*/
box-shadow:2px 2px 10px #909090;/*兼容opera或ie9*/}
#popup ul{}
#popup ul li{width:130px;height:25px;border-bottom:1px #dde4ed solid;}
#popup ul li p{font:12px/25px "宋体";color:#333333;padding:0px 4px;text-align:left;cursor:pointer;float:none}
#popup ul li p:hover{background:#ebebeb;cursor:pointer;}

部分js方法

if(prresult.length=='1'){
							appendStr += "<a href=\"javascript:lx("+prresult[0].ID+","+ybresult[i].NSRGM+",'"+ybresult[i].SFSY+"',"+ybresult[i].CH_ID+");\" class='sy-lx'>练习</a>"; 
						}else{
							appendStr +="<a class='sy-lx' οnmοuseοver='MM_over(this)' οnmοuseοut='MM_out(this)'>练习<div id='popup'><ul>";
							for(var m=0;m<prresult.length;m++){
								appendStr +=" <li><p οnclick='javascript:lx("+prresult[m].ID+","+ybresult[i].NSRGM+",\""+ybresult[i].SFSY+"\","+ybresult[i].CH_ID+");'>"+prresult[m].LX_NAME+"</p></li>";
							}
							appendStr +="</ul></div></a>";
						}