漂浮窗口受后面样式影响变透明的问题_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 09:19:211007瀏覽
鼠标放上去后弹出的漂浮选项菜单是透明的，怎样才能让它不透明？
原代码如下：
不管用啊，你怎么试的？
不管用啊，你怎么试的？
不是背景透明,是title层,高于onmouseover层.
不管用啊，你怎么试的？
不是背景透明,是title层,高于onmouseover层.
那怎么办啊？我要的就是下面这样的效果，visia选项把横线覆盖。
也不管用呢
也不管用呢
代码结构很乱哦.
代码结构很乱哦.
大神啊。谢谢啦。
原代码如下：
<!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>
回复讨论(解决方案)
选项菜单设置背景颜色
选项菜单设置背景颜色
不管用啊，你怎么试的？
选项菜单设置背景颜色
不管用啊，你怎么试的？
不是背景透明,是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()">
代码结构很乱哦.
<div style=" position: relative; top: 0px; left: 40px; z-index:10;" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
代码结构很乱哦.
大神啊。谢谢啦。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn