我知道这个问题已经被问过多次,但在任何一个问题中我都找不到答案。我正在使用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
,但它们并没有起作用。
#faqBg:hover #spanContainer { /*像你的法国女友一样格式化我*/ }
- misorude