Change Target Cell Hover Color

  • Resolved Steven

    (@shyzer)


    10 years, 2 months ago

    Hey Tobias, I currently have Tablepress set up here and basically want the boxes with green background colors to stay green whenever the mouse hovers over their rows.

    I tried using the code below and I swear it was working for a while, but it’s not today. Is this correct?

    .tablepress-id-2 .row-15 .column-2 tr:hover td {background-color: #0F0 !important;}

    Also this might seem like an odd question, but in setting those cell background colors to green, should I be allowed to lump all of their calls into one?

    For instance in order for the cells to be green, I have to do the following:

    /*winners*/
.tablepress-id-2 .row-15 .column-2 {background-color: #0F0 !important;}

.tablepress-id-2 .row-8 .column-5 {background-color: #0F0 !important;}

.tablepress-id-2 .row-10 .column-5 {background-color: #0F0 !important;}

    Notice they’re all on separate calls. If I lump them together with commas (like below), it doesn’t seem to work. Does this seem odd or normal?

    /*winners*/
.tablepress-id-2 .row-15 .column-2, .tablepress-id-2 .row-8 .column-5, .tablepress-id-2 .row-10 .column-5 {background-color: #0F0 !important;}

    https://www.ads-software.com/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    That first piece of code will not work as there are now tr or td elements inside the cells (the tds are the cells).
    Also, as you are already using the !important keyword, you should not need that extra piece of code, and you are in fact combining the CSS in the correct way.

    Therefore, please try again with

    /*winners*/
.tablepress-id-2 .row-15 .column-2,
.tablepress-id-2 .row-8 .column-5,
.tablepress-id-2 .row-10 .column-5 {
  background-color: #0F0 !important;
}

    If that does not work, please post a link to the page with the table.

    Regards,
    Tobias

    Thread Starter Steven

    (@shyzer)

    Hey Tobias, thanks for the speedy reply! My page can be found here: https://30pointpool.com/big-board/

    So is there a way to change the hover color for certain cells while keeping the default blue hover color for all the remaining cells? I tried the code below (I removed the td and !important) and that worked for keeping the cells I wanted green, however it changed the default blue color for the rest of the cells.

    .tablepress-id-2 .row-hover tr:hover {background-color: #d9edf7;}

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that would be possible with something like

    .tablepress-id-2 .row-hover tr:hover .column-4 {
  background-color: #d9edf7 !important;
}

    Regards,
    Tobias

    Thread Starter Steven

    (@shyzer)

    Mate, you’re the best! It’s working perfectly now, thanks again for the awesome plugin and support.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Target Cell Hover Color’ is closed to new replies.