Question

我有两个部门。一个用于标题（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 */

Answer 1

您的.center元素涵盖了整个head-top元素。让我们找到用你试图存档的CSS制作CSS的另一种方法，修复，删除并离开以下内容：

.center {
  background: rgba(0, 0, 0);
  text-align: center;
  color: #000000;
  cursor: pointer;
}

<h> <div>似乎没有得到认可</div>

1 个答案: