title: How to change background-color of Bootstrap column on hover?
body: <p>I have a grid simulating a fake table made from divs using Bootstrap. I know how to change the background color of the <code>row</code> on <code>hover</code>. What I don't know is how to change the background of the div column on hover. I tried something but it's not working. Any ideas appreciated.</p>
  
  <p>I've also made a <strong><a href="https://jsfiddle.net/0x18L3mr/" rel="nofollow noreferrer">JSFiddle</a></strong>.</p>
  
  <p>My code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fake_table{
      background: #fdf6e3;
      overflow: hidden;
  }
  .istoric_row:hover{
   background: #FEFAEE;
  }
  .td, .th {
    position: relative;
  }
  .td:hover::after,
  .th:hover::after {
    content: "";
    position: absolute;
    background-color: #ffa;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="fake_table istoric_calendar"&gt;
    &lt;div class="ft_header"&gt;
      &lt;div class="clearfix"&gt;
        &lt;div class="col-md-4 th"&gt;Client&lt;/div&gt;
        &lt;div class="col-md-2 th"&gt;Added&lt;/div&gt;
        &lt;div class="col-md-6 th"&gt;
          &lt;div class="clearfix"&gt;
            &lt;div class="col-xs-6"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-3"&gt;
                  L
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  M
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  Mi
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  J
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-xs-6"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-3"&gt;
                  V
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  S
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  D
                &lt;/div&gt;
                &lt;div class="col-xs-3"&gt;
                  8
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ft_content mCustomScrollbar _mCS_1 mCS_no_scrollbar"&gt;
      &lt;div id="mCSB_1" class="mCustomScrollBox mCS-dark mCSB_vertical mCSB_inside" style="max-height: none;" tabindex="0"&gt;
        &lt;div id="mCSB_1_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="ltr"&gt;
          &lt;div class="clearfix istoric_row"&gt;
            &lt;div class="col-md-4 td"&gt;Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor&lt;/div&gt;
            &lt;div class="col-md-2 td"&gt;6 months ago&lt;/div&gt;
            &lt;div class="col-md-6 td"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      1
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      2
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      3
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      4
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      5
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      6
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      7
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      8
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix istoric_row"&gt;
            &lt;div class="col-md-4 td"&gt;Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor&lt;/div&gt;
            &lt;div class="col-md-2 td"&gt;6 months ago&lt;/div&gt;
            &lt;div class="col-md-6 td"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      1
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      2
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      3
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      4
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      5
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      6
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      7
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      8
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix istoric_row"&gt;
            &lt;div class="col-md-4 td"&gt;Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor&lt;/div&gt;
            &lt;div class="col-md-2 td"&gt;6 months ago&lt;/div&gt;
            &lt;div class="col-md-6 td"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      1
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      2
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      3
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      4
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      5
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      6
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      7
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      8
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix istoric_row"&gt;
            &lt;div class="col-md-4 td"&gt;Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor&lt;/div&gt;
            &lt;div class="col-md-2 td"&gt;6 months ago&lt;/div&gt;
            &lt;div class="col-md-6 td"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      1
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      2
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      3
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      4
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      5
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      6
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      7
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      8
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix istoric_row"&gt;
            &lt;div class="col-md-4 td"&gt;Lorem ipsum dolor / Lorem ipsum dolor / Lorem ipsum dolor&lt;/div&gt;
            &lt;div class="col-md-2 td"&gt;6 months ago&lt;/div&gt;
            &lt;div class="col-md-6 td"&gt;
              &lt;div class="clearfix"&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      1
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      2
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      3
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      4
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-6"&gt;
                  &lt;div class="clearfix"&gt;
                    &lt;div class="col-xs-3"&gt;
                      5
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      6
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      7
                    &lt;/div&gt;
                    &lt;div class="col-xs-3"&gt;
                      8
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-dark mCSB_scrollTools_vertical" style="display: none;"&gt;
          &lt;div class="mCSB_draggerContainer"&gt;
            &lt;div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; height: 0px; top: 0px;"&gt;
              &lt;div class="mCSB_dragger_bar" style="line-height: 30px;"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="mCSB_draggerRail"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clearfix total_saptamanal"&gt;
      &lt;div class="col-md-4 th"&gt;Total 123&lt;/div&gt;
      &lt;div class="col-md-2 th"&gt;Total daily 22&lt;/div&gt;
      &lt;div class="col-md-6 th"&gt;
        &lt;div class="clearfix"&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;div class="clearfix"&gt;
              &lt;div class="col-xs-3"&gt;
                23
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                44
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                52
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                21
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;div class="clearfix"&gt;
              &lt;div class="col-xs-3"&gt;
                55
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                33
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                11
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                8
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>