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

我有一個頁面比屏幕上更廣泛。而且我的腳本只能處理在滾動到右側之前可以在頁面上看到的元素（當我滾動到右側時，腳本不能正常工作，並且背景色不會更改）.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/