web-dev-qa-db-ja.com

ngx-マウスホバー用のデータ可能なcssスタイリング

bootstrapテーマでngx-datatableを使用しています。マウスをセルに合わせたときのスタイルを変更する方法が見つからないか、わかりませんか？。この例では、グレー

http://swimlane.github.io/ngx-datatable/#css

このようにアクティベーションの色を変更することができましたが、ホバーの色がわかりません。

::ng-deep .ngx-datatable.bootstrap .datatable-body .datatable-body-
row.active {
  background-color: #006eff;
  color: #FFF;
}
cssangularngx-datatable
6
Tim Tharratt
.ngx-datatable.bootstrap:not(.cell-selection) .datatable-body-row:hover,
.ngx-datatable.material:not(.cell-selection) .datatable-body-row:hover .datatable-row-group
{ 
   background: red;
}

これは機能します。

11
C.Schubert
 :Host
  ::ng-deep
  .ngx-datatable.bootstrap:not(.cell-selection)
  .datatable-body-row:hover,
:Host
  ::ng-deep
  .ngx-datatable.material:not(.cell-selection)
  .datatable-body-row:hover
  .datatable-row-group {
  background: red;
}

追加する必要がありました

    :Host
  ::ng-deep

それからそれは働き始めました。

線形変換があるため、他のデフォルトスタイルを変更できます。

:Host
  ::ng-deep
  .ngx-datatable.material:not(.cell-selection)
  .datatable-body-row:hover {
  background-color: #007bff2e;
}
1
BartusZak