Topic: How to set bg-colors on table-hover?

Pelle Widell priority asked 4 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">
      <th scope="col">First</th>
  <tbody class="purple lighten-4">

Are there a way to set hover with your Classnames? I know I can overwrite in own CSS like

   background-color: #e1bee7; 

But then I'm lost if any color in MDB CSS changes. I guess I can't "import" like

    background-color: @purple lighten-4;

So what approach do we need to go?

Se example on

Krzysztof Wilk staff answered 4 years ago


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 :)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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