如何刪除angularjs中某些單元格的懸停效果

Question

我正在使用angularjs，以下是我的CSS

table {
    border: 1px solid black;
    padding: 0.5em;
}

td {
    padding: 1em;
    border: 2px solid gray;
}

td:hover {
    cursor: default;
    background-color: gray;
}

.active {
    border: 2px solid lightgreen;
    border-radius: 5px;
}

.booked {
    background-color: lightgray;
}

.no_seat {
    padding: 0em;
    border: 2px white;
    background-color: white;
}

.filled {
    background-color: teal;
}

我想刪除td：hover效果，如果它是no_seat我刪除了單元格的邊框，如果no_seat通過重置填充和邊框但不知道如何刪除懸停效果。

以下是我的index.html

<div ng-app="bookYourSeatApp" ng-controller="mainCtrl as ctrl">
    <label>Persons <select ng-model="ctrl.selectedCount" ng-change="ctrl.seats.setAvailCount(ctrl.selectedCount)" ng-options="count as count.val for count in ctrl.selectionCount"></select></label>
    Seats left: {{ctrl.seats.availCount}}<br/>
    Seats selected: {{ctrl.seats.checkedSeats}}<br/>
    <table ng-repeat="(key, rang) in ctrl.seats.map">
        <tr ng-repeat="row in rang.seats">
            <td  ng-repeat="seat in row" ng-class="{'active': seat.checked, 'booked': seat.status == 'UNAVAILABLE', 'no_seat': seat.status == 'NO_SEAT', 'filled': seat.status == 'FILLED'}" ng-click="ctrl.seats.select({rang:key, row:row, seat: seat}, ctrl.selectedCount)">
                {{seat.caption}}
            </td>
        </tr>
    </table>
</div>

Answer 1

如果我理解你的問題，這可以簡單地用純css完成。

結合您的CSS選擇器：

td:hover {
    cursor: default;
    background-color: gray;
}

.no_seat {
    padding: 0em;
    border: 2px white;
    background-color: white;
}

/* this will control the "no_seat" hovered styles */
td.no_seat:hover {
    background-color: white;
    /* any other styles you want here */
}

正如@ricky_ruiz在他的回答中指出的那樣，你也可以使用:not()偽選擇器，但如果你有其他類，你希望它不會影響，IMO會變得復雜......

Answer 2

您正在尋找:not pseudo-class。

否定CSS偽類， 不是（X） ，是一個以簡單的選擇器 X作為參數的功能表示法。 它匹配一個未由參數表示的元素。 X不得包含另一個否定選擇器。

---

改變這個：

td:hover {
    cursor: default;
    background-color: gray;
}

對此：

td:not(.no_seat):hover {
 cursor: default;
 background-color: gray; 
}