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');
    });
});

我有一个比屏幕宽得多的页面。我的脚本只能处理在向右滚动之前可以在页面上看到的元素（当我向右滚动时，脚本不起作用，背景颜色不会改变。）DIV用数据创建表。

我希望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;
};

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

Jquery仅在屏幕上进行更改

1 个答案: