list-group-item list-group-item-action disabled

html bootstrap5 Sample

ホバー、無効、アクティブの状態を持つ :list-groupとlist-group-item-action


リスト項目1 リスト項目2
  <!-- ホバー、無効、アクティブの状態を持つ  -->
  <!-- btnクラスは使わず、list-group-item-actionを使う  -->
  <!-- disabledにすることで、pointer-events: none が適用され、ホバーやアクティブな状態がトリガーを防ぐ -->
  <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">リスト項目1</a>
    <a href="#" class="list-group-item list-group-item-action">リスト項目2</a>
    <button type="button" class="list-group-item list-group-item-action">リスト項目ボタン</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目ボタンdisabled</button>
  </div>

ボタンのリストグループ:list-group-item-action


  <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">リスト項目1</button>
    <button type="button" class="list-group-item list-group-item-action">リスト項目2</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>リスト項目3</button>
  </div>