как на счет такого решения?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<style type="text/css">
.grey {
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="content">
<div class="row a">
<div class="col-md-4 el-col">1</div>
<div class="col-md-4 el-col">2</div>
<div class="col-md-4 el-col">3</div>
</div>
<div class="row b ">
<div class="col-md-4 el-col">1</div>
<div class="col-md-4 el-col">2</div>
<div class="col-md-4 el-col">3</div>
</div>
<div class="row c">
<div class="col-md-4 el-col">1</div>
<div class="col-md-4 el-col">2</div>
<div class="col-md-4 el-col">3</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"
integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script>
$(function () {
var a = $(".el-col");
a.hover(
function () {
var self = $(this), parent = self.parent('.row');
parent.addClass('grey');
},
function () {
var self = $(this), parent = self.parent('.row');
parent.removeClass('grey');
}
);
})
</script>
</div>
</body>
</html>
Здесь же можно и для столбцов задать стиль...
