Question

注意：在缩小范围时，我认为这可能与position: relative有关，但我需要弄清楚要做什么。

我有一个从头开始构建的应用程序，没有任何按钮或链接正在触发。我已将问题缩小到CSS文件中，因为当我删除CSS时，所有按钮和链接都可以工作。

控制器将信息绑定到范围，就像我将$scope.test = "hello";绑定到DOM一样。但是，没有链接或按钮触发。我尝试了不同链接和按钮的混合和匹配，当光标悬停在链接/按钮上时，光标不会变为指针。我错过/遗忘了什么？

在底部，我已经包含了CSS。

的index.html

  <div ng-controller="MainController" class="main-guy">
    {{test}}
    <div style="width:100px; height:100px; position:absolute; background-color: blue" ng-click="info('please work')">Click</div>
        <div class="screen-outside">
          <a href="http://www.google.com">This is a test</a>
            <div class="screen-inside" ui-view>
                <!-- Screen changes with click -->
            </div>
      <a href="http://www.google.com">This is a test</a>
      <button ng-click="hey()">HEY!</button>
            <div class="screen-footer">
                <div class="buttons-bar">
                    <div class="buttons-holder">
                        <div class="button-ind"><a ng-click="screen()">Rider</a></div>
                        <div class="button-ind"><button class="btn" ng-click="screen()">Audio</button></div>
                        <div class="button-ind">Power</div>
                        <div class="button-ind"><button class="btn" ng-click="screen()" value="Bluetooth"></div>
                        <div class="button-ind"><a ui-sref="#" ng-click="screen()">{{test}}</a></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="footer-block-container">
            <div class="bottom-block left-block"></div>
            <div class="bottom-block right-block"></div>
        </div>
    </div>

MainController.js

$scope.hey = function(){
    $window.alert("YAY!!!!");
};

$scope.test = 'Hello';

$scope.screen = function(){
    console.log("Hey!!!");
};

$scope.info = function(msg){
    console.log("Hey!!!");
}

的style.css

.main-guy {
    position:relative;
    width: 640px;
    height: 480px;
    background-color: #050505;
    margin: auto;
    z-index:-1000;
}
.screen-outside {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    height: 90%;
    background-color: #888888;
    bottom: 0;
    position: absolute; 
}
.screen-inside {
    margin:auto;
    position:relative;
    height:80%;
    width:85%;
    background-color: #666666;  
}
.screen-footer {
    position: relative;
    bottom: 0;
    margin: auto;
    background-color: #AAAAAA;
    height:20%;
    width:100%;
}
.buttons-bar {
    margin:auto;
    height: 80%;
    width: 70%;
    position:relative;
    background-color: #707070;
}
.buttons-holder {
    width:80%;
    margin: 0 auto;
}
.button-ind {
    margin:auto;

    position:relative;
    width:20%;
    height:40%;
    background-color: #535353;
    font-size:15px;
  display:inline-block;
}
.btn {  
  background-color: transparent; border: 0; padding: 0; width:100%; height:100%;
}
.footer-block-container {
    margin-top:80%;
    width:100%;
    bottom:0;
    left:0;
    height:25%;
    position:absolute;
}
.bottom-block {
    width:20%;
    height:100%;
    background-color:#3A3A3A;

}
.left-block {
    float:left;
}
.right-block {
    float:right;
}

Answer 1

所以我想出了问题：在我的所有DIV元素上，我需要设置z-index: *some value* ;，我在DOM的元素中设置了position。这马上解决了这个问题。

链接和按钮没有触发

1 个答案: