Question

我知道关于同一问题有多个问题，但是我都找不到答案。我正在使用JavaScript激活其他元素上的悬停。 javascript代码可以正常工作，但是只有在我强制刷新页面CTRL + R后才能运行。如果我通常转到该页面，它将无法正常工作。

JS：

      $(function() {
      $('#faqBg').hover(function() {
      $('#spanContainer').css('background', 'rgb(0, 0, 0, 0.6');
      }, function() {
        // on mouseout, reset the background colour
      $('#spanContainer').css('background', '');
      });
    });

.image-wrapper {
 position: relative;
}
 
 #faqBg { 
    background: linear-gradient(-45deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://images.pexels.com/photos/1239162/pexels-photo-1239162.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    padding: 60px 0px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    }
    
 #spanContainer {
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 20px 0px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image-wrapper">

<div id="faqBg">

<div id="spanContainer">

Hover trigger

</div>

</div>

</div>

这是我正在使用的代码，当我这样做时，一切似乎都很好，但是在网站上却没有。我尝试添加$(document).ready和$(document).load，但没有成功。

Answer 1

这是由于缓存而发生的。

在加载时向您的javascript文件添加版本：

public class ModelVersionStatisticalDetailDto { public ModelVersionStatisticalReportDto FormFilters { get; set; } public int [] ItemIds { get; set; } public string[] Versions { get; set; } }在要查看的每个更改上增加<script src="file.js?v=1"></script>参数。如果页面是动态生成的，则可以将时间戳记值设置为v，具体取决于您使用的后端语言。

另一种解决方案是使用以下元标记：

Answer 2

改为使用CSS：

 #faqBg:hover #spanContainer { 
       background: rgba(0,0,0,0.6);
 }

Answer 3

代码中的javascript函数包含样式更改，这些更改将在硬刷新后反映出来。

能否请您确认是否有其他JS函数（无样式更改的函数）是否与您提到的方式相同。

我的JavaScript函数仅在我强制刷新页面后才能工作

3 个答案: