後続のstyles_html/css_WEB-ITnoseの影響でフローティングウィンドウが透明になってしまう問題-htmlチュートリアル-php.cn

後続のstyles_html/css_WEB-ITnoseの影響でフローティングウィンドウが透明になってしまう問題

WBOY

リリース： 2016-06-21 09:19:21

オリジナル

1011 人が閲覧しました

マウスを置いた後にポップアップするフローティングオプションメニューが透明ですが、どうすれば不透明にできますか?

元のコードは次のとおりです:

<!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>

ログイン後にコピー

ディスカッションに返信(解決策)

オプションメニューの背景色を設定します

オプションの背景色を設定しますメニュー

うまくいかない、何を試しますか?

背景色を設定するオプションメニュー

機能しません。どうやって試しましたか?

これは背景の透明度ではなく、onmouseover レイヤーよりも上位のタイトルレイヤーです

#sddm div {z-index:10}

オプションメニューで背景色を設定します

うまくいきませんああ、あなたどうやって試しましたか？

透明なのは背景ではなく、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()">

ログイン後にコピー

コードの構造がとても汚いです

なんと。ありがとう。