Twitter Bootstrap Question posted in

Bootstrap list group striped conflict with hover – Twitter bootstrap

I’m trying to simulate .table-hover and table-striped on list-group. First I have tried the following for hover:

<!-- HTML --!>
<ul class="list-group list-group-hover">
  <li class="list-group-item">...
...
// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}

The above code works fine and it generates hover over each list’s item.

However, trying to add striped like table as the following code, does not work, i.e the strip effect only works but the hover is not working.

<!-- HTML -->

<ul class="list-group list-group-hover list-group-striped">
...

// CSS
ul.list-group.list-group-hover li:hover{
    background: $table-bg-hover;
}
ul.list-group.list-group-striped li:nth-of-type(odd){
    background: $table-bg-accent;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: $body-bg;
}

I don’t know how could I make the two effects, hover and stripped, working at the same time as table do?

Tags:

2

Answers


  1. 0

    :hover needs to come last

    ul.list-group.list-group-striped li:nth-of-type(odd){
    background: blue;
}
ul.list-group.list-group-striped li:nth-of-type(even){
    background: purple;
}
ul.list-group.list-group-hover li:hover{
    background: red;
}
    <ul class="list-group list-group-hover list-group-striped">
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
  <li>asdf</li>
</ul>
    Login or Signup to reply.
  2. 0

    Here’s my solution, using the standard bootstrap 5 colours. Based on the official example.

    You could tweak the stripe and hover colours.

    .list-group.list-group-striped .list-group-item:not(.active):nth-of-type(even) {
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group.list-group-striped .list-group-item:not(.active):hover {
  background-color: var(--bs-list-group-action-active-bg);
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container mt-3">
  <div class="list-group list-group-striped w-auto">

    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">List group item heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">now</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Another title here</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
            </div>
            <small class="opacity-50 text-nowrap">3d</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3 active" aria-current="true">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Third heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">1w</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Some heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">1w</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Some heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">1w</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Some heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">1w</small>
        </div>
    </a>
    <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="https://github.com/twbs.png" alt="twbs" class="rounded-circle flex-shrink-0" width="32" height="32">
        <div class="d-flex gap-2 w-100 justify-content-between">
            <div>
                <h6 class="mb-0">Some heading</h6>
                <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
            </div>
            <small class="opacity-50 text-nowrap">1w</small>
        </div>
    </a>

  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search