Twitter Bootstrap Question posted in

Twitter bootstrap – Avoid highlighting all rows and columns with jQuery

I am using the following piece of jQuery for my table in Twitter Bootstrap:

$('td').mouseover(function () {
   $(this).siblings().css('background-color', '#EAD575');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
   $(this).siblings().css('background-color', '');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

I found this piece of code on a site and I must admit, this works perfectly…

…however is it possible to tweak it a bit, so it doesn’t target the selected row and/or column either.

For example ignore the row/column with an ID called ‘nohover’

Is this possible? The reason for this, is that I have about 3 or 4 merged rows which shouldn’t be highlighted, because it will look “weird”.

Anyone knows if this is possible, if so; how?

Tags:

2

Answers


  1. 0

    $().not('.nohover') should do the trick 

    $('td').mouseover(function () {
    $(this).siblings().not('.nohover').css('background-color', '#EAD575');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').not('.nohover').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
    $(this).siblings().css('background-color', '');
    var ind = $(this).index();
    $('td:nth-child(' + (ind + 1) + ')').not('.nohover').css('background-color', '');
});

    https://jsfiddle.net/cd54pqdx/1/

    Login or Signup to reply.
  2. 0

    A cleaner way to do this is to rely on external CSS a bit more. Instead of changing the background-color with inline CSS, you can add a CSS class with that background color. Just make sure that your .no-hover class has a background-color set to transparent (or whatever the default background color is for your table cells).

    Since CSS cascades, you can place the .no-hover class below your new class in the stylesheet and the no-hover class will take precedence.

    The code would change from 

    $('td').mouseover(function () {
   $(this).siblings().css('background-color', '#EAD575');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
   $(this).siblings().css('background-color', '');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

    to

    $('td').mouseover(function () {
   $(this).siblings().addClass('active-hover');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').addClass('active-hover');
});
$('td').mouseleave(function () {
   $(this).siblings().removeClass('active-hover');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').removeClass('active-hover');
});

    (Change active-hover to whatever you decide you hover class to be named)

    I would avoid using the CSS3 :not selector because it is not supported in <=IE8

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search