How to get selected table cells background colour?


Tags: jquery,html,css,table

Problem :

so I have a table which displays information. One of the columns in the table is a notes column. On this notes column I've created a tool tip using some css and Jquery. The problem I'm having is that when I hover over the cell, it displays the tool tip correctly, however it wipes the colour (turns white) from the cell after moving the mouse away. I want it to retain its colour after the mouse it moved away, but I'm not sure how.

Current code for the tool tip event (each notes cell has the note class):

$('.note').hover(
       function (event) {
           $(event.target).css({
               "white-space": "normal",
               "text-overflow": "clip",
               "background-color": "#eeeeee",
               "max-width": "200px",
               "position": "absolute"
           });
       }, function (event) {
           $(event.target).css({
               "white-space": "nowrap",
               "text-overflow": "ellipsis",
               "background-color": "transparent",
               "max-width": "200px",
               "position": "static"
           });
       }
   );


Solution :

Its better to use pure css for this purpose,

.note:hover {
    white-space: normal;
    text-overflow: clip;
    background-color: #eeeeee;
    max-width: 200px;
    position: absolute;
}

In this case, elements will retain the background color and other properties after hover.


    CSS Howto..

    Border positioning: how to?

    How to include css file in a JavaFx Spring application

    How to stretch an element out vertically so that it is always at least as tall as its sibling?

    How to change the width of a CSS flex-box column?

    How to add checkmarks and x's when validating in angularjs?

    How to keep nav bar from shifting elements to next line when zooming in?

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    how to overwrite global css to div tag which contains different html tags with different style

    How to use a CSS for only one div and not the rest of the code?

    I have a nav bar that changes the src of an iframe, how can i change the active link color?

    How to apply css, after Jquery adds a class?

    How to make this loading animation?

    How to avoid overlapping text using CSS?

    How to wrap text around image?

    how to give no-more-use of css in jquery for css params

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How to get these tables stacked on top of each other?

    how to do display none using css

    How to center list of links in a straight line. CSS

    How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

    How to add decoration to link in CSS?

    How to overlay images with css (cross-browser)

    PrimeFaces: how can I make use of customized icons?

    How to make child element do not fill his parent when hover is performed in CSS?

    how to change the css of default select2 placeholder color?

    How do I get a CSS Selector to Skip Over?

    How to apply style to Nth instance of class, and find by indirect inheritance - CSS Jquery

    JQuery : How to disable mouse move vertically?

    How can I apply some css for all readonly elements on focus in IE8?

    Floating of Divs not exact. How to arrange them the right way?