漂浮窗口受后面样式影响变透明的问题_html/css

漂浮窗口受后面样式影响变透明的问题_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:19:21

Original

1004 people have browsed it

鼠标放上去后弹出的漂浮选项菜单是透明的，怎样才能让它不透明？

原代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉</title><style>#sddm{	margin: 0 auto;	padding: 0;	z-index: 30;	background-color:#F4F4F4;	width: 480px;	height:23px;}#sddm li{	margin: 0;	padding: 0;	list-style: none;	float: left;	font: bold 12px arial}#sddm li a{	display: block;	margin: 0 1px 0 0;	padding: 4px 10px;	width: 60px;	background: #5970B2;	color: #FFF;	text-align: center;	text-decoration: none}#sddm li a:hover{	background: #49A3FF}#sddm div{	position: absolute;	visibility: hidden;	margin: 0;	padding: 0;	background: #EAEBD8;	border: 1px solid #5970B2}#sddm div a	{	position: relative;		display: block;		margin: 0;		padding: 5px 10px;		width: auto;		white-space: nowrap;		text-align: left;		text-decoration: none;		background: #EAEBD8;		color: #2875DE;		font: 12px arial}	#sddm div a:hover	{	background: #49A3FF;		color: #FFF}		body{ font-size:12px; color:#666666; line-height:18px;}.clear{ clear:both;}.mtop5{ margin-top:5px;}.title{ border:solid 1px #d4d4d4; height:20px; font-weight:bold; position:relative; border-left:none; border-right:none;}.title-t{ position:absolute; top:0px; left:0px; border-bottom:solid 2px #4583bd; height:20px; line-height:20px; padding-left:10px;}</style><!-- dd menu --><script type="text/javascript">function prepareData(){	var a = document.getElementById("m3");	var b = document.createElement('a')	b.innerHTML = "This is a test";	b.href="http://www.baidu.com";	b.target="_blank";	b.onclick="test()";	a.appendChild(b);		var c = document.createElement('input');	c.type="button";	c.value="test";	//c.onclick="test()";	c.setAttribute("onclick", "test()");           	a.appendChild(c);}	function test(){	alert("1234");}<!--var timeout = 500;var closetimer= 0;var ddmenuitem = 0;// open hidden layerfunction mopen(id){		// cancel close timer	mcancelclosetime();	// close old layer	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';	// get new layer and show it	ddmenuitem = document.getElementById(id);	ddmenuitem.style.visibility = 'visible';}// close showed layerfunction mclose(){	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}// go close timerfunction mclosetime(){	closetimer = window.setTimeout(mclose, timeout);}// cancel close timerfunction mcancelclosetime(){	if(closetimer)	{		window.clearTimeout(closetimer);		closetimer = null;	}}// close layer when click-outdocument.onclick = mclose; // --></script></head><body style="text-align:center" onload="prepareData();"><ul id="sddm"> 	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">标题</a>		<div style=" position: relative; top: 0px;  left: 40px;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">		<a href="#">Visa</a>		<a href="#">Paypal</a>		</div>	</li></ul><div class="mtop5">    <div class="title">    	<div class="title-t">情况</div>    </div></div></body></html>

Copy after login

回复讨论(解决方案)

选项菜单设置背景颜色

不管用啊，你怎么试的？

选项菜单设置背景颜色

不管用啊，你怎么试的？

不是背景透明,是title层,高于onmouseover层.

#sddm div {z-index:10}

选项菜单设置背景颜色

不管用啊，你怎么试的？

不是背景透明,是title层,高于onmouseover层.

那怎么办啊？我要的就是下面这样的效果，visia选项把横线覆盖。

#sddm div {z-index:10}

也不管用呢

#sddm div {z-index:10}

也不管用呢

<div style=" position: relative; top: 0px;  left: 40px; z-index:10;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

Copy after login

代码结构很乱哦.

<div style=" position: relative; top: 0px;  left: 40px; z-index:10;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

Copy after login

代码结构很乱哦.

大神啊。谢谢啦。