私は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;
}
no_seatの場合はtd：hover効果を削除したい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>
あなたは:not疑似クラスを探しています。
否定CSS擬似クラス：ていない（X）は、機能的な表記法である単純なセレクタ取る引数としてXを。引数で表されていない要素と一致します。Xは別の否定セレクタを含めることはできません。
これを変える：
td:hover {
cursor: default;
background-color: gray;
}
これに：
td:not(.no_seat):hover {
cursor: default;
background-color: gray;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加