Css style table:hover does not work when background image set from js.

I have one div and I have added list of tables to it, to create menu effect and I have set background for each table using CSS Style as follows:

table
{
  background: url('normal.png') no-repeat right top;
  开发者_如何学Gocursor: pointer;
  margin: 0px;
}

I am changing background image of the table on Hover event as follows:

table:hover
{
  background: url('hover.png') no-repeat right top;
}

What I want to do is, when user clicks on one of the table, I want to display some different bg image and it should remain there until user selects another table from the list.

how to archive it in CSS.

Thanks.

I don't think you can achieve this using just CSS.

I would try using jQuery to add and remove a class to the tables.