Maison > interface Web > tutoriel HTML > 漂浮窗口受后面样式影响变透明的问题_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer: 2016-06-21 09:19:21
original
1034 Les gens l'ont consulté
鼠标放上去后弹出的漂浮选项菜单是透明的,怎样才能让它不透明?



原代码如下:
<!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>
Copier après la connexion


回复讨论(解决方案)

选项菜单设置背景颜色

选项菜单设置背景颜色



不管用啊,你怎么试的?


选项菜单设置背景颜色



不管用啊,你怎么试的?



不是背景透明,是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()">
Copier après la connexion
Copier après la connexion

代码结构很乱哦.

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

代码结构很乱哦.

大神啊。谢谢啦。
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal