Apply bootstraps tr hover effect to a div

Question

I am using Bootstrap for my css themes. The themes are compiled and saved into the database for use later on. This means that the pages only have access to the compiled css and not the less files.

Given that, how can I apply Bootstrap’s tr:hover effect to various divs? I need the color to be the same as what is defined for tr:hover and I can’t use less variables.

Bootstrap's style:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #f5f5f5;
}

Is it possible to define a css element based on another one that is assigned to a tr? Is there a way to grab the style using jQuery?

Any suggestions?

Answer 1

Pure CSS Way:

Have a class for the div as .hoverDiv and the CSS for this:

.hoverDiv {background: #fff;}
.hoverDiv:hover {background: #f5f5f5;}

Fiddle: http://jsfiddle.net/bD5kS/

jQuery Way:

$(document).ready(function(){
    $(".hoverDiv").hover(function(){
        $(this).css("background", "#f5f5f5");
    }, function(){
        $(this).css("background", "#fff");
    });
});

Fiddle: http://jsfiddle.net/KQzwc/

To get the colour dynamically, use $(".table tbody tr:hover").css("background-color"):

$(document).ready(function(){
    $(".hoverDiv").hover(function(){
        $(this).css("background", $(".table tbody tr:hover").css("background-color"));
    }, function(){
        $(this).css("background", $(".table tbody tr").css("background-color"));
    });
});