CSS僞選擇器「阻止」角度Ng點擊？

我有一個css表卡布局，使用:before僞選擇器插入標題名稱。CSS僞選擇器「阻止」角度Ng點擊？

同樣在我的表格中，我創建了一個按鈕，當按下時會觸發警報。

的問題是，該按鈕不會在plunkr工作：http://plnkr.co/edit/ZKweKp

但是，當我把CSS出來，按鈕按預期工作。

這裏的CSS：

.cards tr:nth-of-type(odd) { 
    background: #eee; 
} 

.cards th { 
    background: #333; 
    color: white; 
} 
.cards td, 
.cards th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
} 

/* Force table to not be like tables anymore */ 
.cards table, 
.cards thead, 
.cards tbody, 
.cards th, 
.cards td, 
.cards tr { 
    display: block; 
} 

/* Hide table headers (but not display: none; for accessibility) */ 
.cards th { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

.cards tr { border: 1px solid #ccc; } 

.cards td { 
    /* Behave like a "row" */ 
    border: none; 
    border-bottom: 1px solid #eee; 
    position: relative; 
    padding-left: 20%; 
} 

.cards td:before { 
    /* Now like a table header */ 
    position: absolute; 
    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap; 
} 

.cards td:nth-of-type(1):before { content: "Date"; } 
.cards td:nth-of-type(2):before { content: "User"; }

的HTML：

<!DOCTYPE html> 
<html ng-app="app"> 

<head> 

    <script data-require="[email protected]~1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller="IndexController"> 

    <table class='cards'> 
    <tr> 
     <th>Color</th> 
     <th>Button</th> 
    </tr> 
    <tr ng-repeat="color in pageData.colors"> 
     <td>{{ color }}</td> 
     <td> 
     <button ng-click="pageFn.clickMe()">Click Me</button> 
     </td> 
    </tr> 
    </table> 

</body> 

</html>

而且JS：

var app = angular.module('app', []); 

app.controller('IndexController', function ($scope) { 
    $scope.pageData ={}; 
    $scope.pageFn = {}; 

    $scope.pageData.colors = ['This is red. etc... ', 'This is green. etc...', 'Blue text here... asdfadsfadsfadsf a']; 

    $scope.pageFn.clickMe = function() { 
    console.log('hello'); 
    alert('clicked!'); 
    } 

});

來源

2015-06-02 Rhs

在'.cards td：之前'寬度：45％;'超過按鈕 - 如果您刪除該屬性它的工作。如果你有按鈕，你可以添加另一個類，刪除寬度屬性？ – sirrocco

只要改變你的.cards td:before這個CSS，

.cards td:before { 
    /* Now like a table header */ 
    position: absolute; 
    /* Top/left values mimic padding */ 
    top: 6px; 
    left: 6px; 
    width: auto; 
    padding-right: 10px; 
    white-space: nowrap; 
}

width:45%更改爲width:auto;，這是防止按鈕被點擊。

來源

2015-06-02 18:54:11 dsaket

修復它。謝謝！ – Rhs

CSS僞選擇器「阻止」角度Ng點擊？

回答

相關問題