Topic: How to set bg-colors on table-hover?
                  
                  Pelle Widell
                  priority
                  asked 5 years ago
                
If I have a table with classes table, table-striped and table-hover I get hover effect, but how can I set bg and bg:hover style classes?
If I add purple on table I get purple layout, but I can't set the hover or striped class, like this
 <table class="table table-striped table-hover">
  <thead class="purple darken-2 text-white">
    <tr>
      <th scope="col">First</th>
    </tr>
  </thead>
  <tbody class="purple lighten-4">
    <tr>
      <td>Mark</td>
    </tr>
    <tr>
      <td>Jacob</td>
    </tr>
  </tbody>
</table>
Are there a way to set hover with your Classnames? I know I can overwrite in own CSS like
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th{  
   background-color: #e1bee7; 
 }
But then I'm lost if any color in MDB CSS changes. I guess I can't "import" like
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th{  
    background-color: @purple lighten-4;
     }
So what approach do we need to go?
Se example on https://mdbootstrap.com/snippets/jquery/pelleseconsulting-se/2296522
                      
                      Krzysztof Wilk
                      staff
                        answered 5 years ago
                    
Hi!
I assume that you are using a bundler like webpack, gulp, or sth like that, attached properly scss instead of css and configured sass, because without that it won't work properly anyway. If not - you have to absolutely do that. If yes - importing variables from SCSS should work, you can check /scss/core/_variables.scss file and all defined variables with their names :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
 - Premium support: Yes
 - Technology: MDB jQuery
 - MDB Version: 4.19.1
 - Device: All
 - Browser: All
 - OS: Win 10
 - Provided sample code: No
 - Provided link: Yes