CODEWITHSUNDEEP
jquerycss
sumsaricum
sumsaricum

Reputation: 95

Change CSS for all same-class-elements when hovering over a single same-class-element

I'm looking to change the background-color for ALL cells with class="bg" when hovering ANY cell with class="bg".

Hours of stuff like $('.bg').hover().css("background-color","blue"); and trying out with .each(), .mouseover(), and even .siblings() (although i think that's entirely off the mark) but no result. 

    <head>
    <style type="text/css">
        .bg { background-color:red; }
                    .bg:hover { background-color:blue; }
    </style>
    </head>

    <body>
    <table width="100" border="1" cellspacing="0" cellpadding="0">
         <tr>
              <td class="bg">a</td>
              <td class="bg">a</td>
              <td class="bg">a</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
    </table>
    <br />
    <table width="100" border="1" cellspacing="0" cellpadding="0">
         <tr>
              <td class="bg">a</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td class="bg">a</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
         <tr>
              <td class="bg">a</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
         </tr>
    </table>
    </body>
    </html>

EDIT: After kumiau's working solution I realized that what I'm looking for is far more complex. This is the page I'm working on. Hovering over ANY Hole 1 cell in either of the dark grey sections and ALL Hole 1 cell background-colors change.

Now, that page only shows 1 game type (Fourball Best Ball) with 1 round (Dubin/Kosakewitsch VS Dybkjær/Larsen), but there will be 3 types (Fourball Best ball, Foursomes, Singles), with 6 rounds each, with 18 holes each. That's 324 holes! See last year's tournament here.

So, ahem, that changes things quite a bit. I'm thinking that I could class every hole cell similarly (simply, class="hole") and store the HoleID in a data attribute (something like data-hole-id="fbb_1_4" for Fourball Best Ball, Round 1, Hole 4), in order to make a more general jQ function??

EDIT 2: Got the last bit answered here jQuery selector madness

Upvotes: 0

Views: 4125

Answers (2)

adeneo
adeneo

Reputation: 318352

$('.bg').data('bg', $('.bg').css('background-color')).on({
    mouseenter: function() {
       $('.bg').css('background-color', 'cyan');
    },
    mouseleave: function() {
       $('.bg').css('background-color', $(this).data('bg'));
    }
});

FIDDLE

Upvotes: 0

kumiau
kumiau

Reputation: 724

$('.bg').hover(
  function(){
    $('.bg').css({"background-color":"blue"});
  },function(){
    $('.bg').css({"background-color":"white"});
});

updated your fiddle: http://jsfiddle.net/kumiau/Nkdny/3/

Upvotes: 2

Related Questions