Home >Web Front-end >HTML Tutorial >漂浮窗口受后面样式影响变透明的问题_html/css_WEB-ITnose
漂浮窗口受后面样式影响变透明的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:19:211011browse
鼠标放上去后弹出的漂浮选项菜单是透明的，怎样才能让它不透明？
原代码如下：
不管用啊，你怎么试的？
不管用啊，你怎么试的？
不是背景透明,是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()">
代码结构很乱哦.
大神啊。谢谢啦。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：扩展Sitemesh3 DecoratorSelector实现基于请求参数调用装饰模板页面的实现_html/css_WEB-ITnoseNext article：opencart