Jquery 仅在屏幕上进行更改

Question

我的html:

<div class="fi-container">
   <div class="fi-row"> 

      <div class="fi-cell"> <!-- content --> </div>
      <div class="fi-cell"> <!-- content --> </div>
      <div class="fi-cell"> <!-- content --> </div>

   </div>
</div>

我的脚本：

$('.fi-cell').on('mouseenter', function(){
    $(this).parent().closest('div').css("background-color", 'yellow');
    });
$('.fi-cell').on('mouseleave', function(){
    $(this).parent().closest('div').css("background-color", 'inherit');
    });
});

我的页面比屏幕宽得多。而且我的脚本只能处理在向右滚动之前可以在页面上看到的元素（当我向右滚动时，脚本不起作用，背景颜色也不会改变。）DIVs creating table 与数据。

我想 background-color 改变整个 <div class='fi-row'> 宽度，而不仅仅是页面加载的第一个宽度。

https://jsfiddle.net/7npL68jj/

Answer 1

尝试将此添加到您的 CSS

.fi-row {
   table-layout: fixed;
   display: table;
};

.fi-cell {
   display: table-cell;
};

我已经更新了你的fiddle：https://jsfiddle.net/7npL68jj/4/

Jquery 仅在屏幕上进行更改

Jquery makes changes only on screen

html

jquery

width