html <div> doesn't seem to get recognised
html <div> doesn't seem to get recognised
似乎没有得到认可。
我有2个部门。一个用于页眉( head-top
),另一个用于页面中其余空间(centre
),如下所示。我已经将单击事件附加到标题中的元素。但这些元素似乎不起作用。我无法单击切换菜单。什么也没发生。我在菜单栏中有 2 个按钮和一个切换菜单。
.HTML:
<div class="head-top">
<div class="menu-links">
<ul class="toggle-menu">
<li class="toggle">
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
</li>
<li class="content0" style="display: none">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="explore">Explore</a></li>
<li><a href="#" id="searcha">Search</a></li>
<li><a href="#" id="recent">Recent</a></li>
</ul>
</li>
</ul>
</div>
<div id="b1">Sign Up</div>
<div id="b2">Upload</div>
</div>
<div class="center">
<div class="middle">
<h1>The Starry Night</h1>
<span><br>Vincent van Gogh</span>
</div>
</div>
.CSS:
.head-top {
width: 90%;
height: 15%;
position: relative;
}
.center {
background: rgba(0, 0, 0);
text-align: center;
position: absolute;
color: #000000;
bottom: 0;
right: 0;
left: 0;
top: 0;
cursor: pointer;
}
.middle {
position: absolute;
margin-top: -6em;
right: 0;
left: 0;
top: 50%;
}
点击事件:
$('li.content0').hide();
$('ul.toggle-menu').delegate('li.toggle', 'click', function () {
$(this).next().toggle('fast').siblings('.content0').hide('fast');
});
编辑:按钮的 CSS
/* 登录,注册按钮从这里开始 */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#b1,
#b2 {
position: relative;
padding: 14px 0;
border: 2px #000000 solid;
color: #000000;
cursor: pointer;
font-family: "Montserrat", "helvetica neue", helvetica, arial, sans-serif;
font-size: .9em;
text-transform: uppercase;
transition: color 0.4s, background-color 0.4s;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: inline-block;
vertical-align: middle;
line-height: 1em;
outline: none;
text-align: center;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 210px;
top: 50%;
left: 50%;
margin: 0 -105px;
width: 210px;
pointer-events: none;
}
#b1:hover,#b1:focus
#b2:hover,#b2:focus {
transition: color 0.4s, background-color 0.4s;
color: white;
text-decoration: none;
background-color: #000000;
}
#b1 {
position: absolute;
top: 7%;
left: 81%;
cursor: pointer;
}
#b2 {
position: absolute;
top: 7%;
left: 100%;
cursor: pointer;
}
/* Buttons End Here */
您的.center
元素覆盖了整个head-top
元素。让我们找到另一种制作CSS的方法,您尝试存档,以进行修复,删除并留下以下内容:
.center {
background: rgba(0, 0, 0);
text-align: center;
color: #000000;
cursor: pointer;
}
相关文章:
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- jQuery AJAX write to XML
- grep in JQuery to C#
- how to convert html <div> to pdf
- Node.js - POST to iFrame?
- SVG xml to image
- Advantages to DOMParser vs template & innerHTML
- how to split a string with ','
- How to declare a Map containing certain properties with flow
- Php variable obj to js
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- D3JS selectAll to append rect
- Javascript connect to websocket
- Underscore each to update collection
- 在哪里可以找到R-to-JavaScript编译器
- SCEditor BBcode to HTML parsing
- Javascript RegEx to XML Schema RegEx
- How to apply javascript on <asp:Buttonfield>?
- PHP Vars to JavaScript Laravel 5.2
- html <div> doesn't seem to get recognised