Jquery 仅在屏幕上进行更改答案

【问题标题】：Jquery makes changes only on screenJquery 仅在屏幕上进行更改
【发布时间】：2017-08-31 08:59:16
【问题描述】：

我的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 用数据创建表.

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

https://jsfiddle.net/7npL68jj/

【问题讨论】：

你能提供一个jsFiddle来展示你的问题吗？
好的。给我一秒钟。
我已经编辑了问题。请向右滚动，你会看到:)
您的 fi-row 是 100% 宽。添加此.fi-row { border:5px solid red;}
好的。我明白你想说什么......但我不知道如何解决它。

标签： jquery html width

【解决方案1】：

尝试将其添加到您的 CSS 中

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

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

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

【讨论】：

嗯，这很有趣。它可以工作，但只是没有为fi-cell 添加额外的代码。谢谢。
我已经稍微清理了您的代码，删除了不必要的边距并添加了box-sizing: border-box 以便更好地练习。您可以在我的答案中查看更新的小提琴。
好的。非常感谢。