我想要实现的目标是,如果窗口大小大于 400,则 #box2
颜色变为黑色(悬停在 #box1
上时), 如果小于 400,#box2
颜色变为黄色。
我以为我完成了这个任务,但是我发现我总是需要刷新页面才能看到效果。一旦窗口大小改变,jQuery 不会立即工作。
我是否需要使用 ajax 或其他东西来使 jQuery 响应工作?
在线样本:http://jsfiddle.net/dFbXr/
这是我的代码
HTML:
<div id="box1">
<div id="box2"></div>
</div>
jQuery:
function colorchange(){
if($(window).width() > 400){
$("#box1").mouseover(function(){
$("#box2").css('background','black');
}).mouseout(function(){
$("#box2").css('background','blue');
});
}else{
$("#box1").mouseover(function(){
$("#box2").css('background','yellow');
}).mouseout(function(){
$("#box2").css('background','blue');
});
}
}
colorchange();
CSS:
#box1{
display: block;
background:red;
background-size: 100%;
position: relative;
padding-bottom: 60%;
}
#box2{
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin: -35px -35px 0 0;
}
最佳答案
您需要在首次加载页面和调整窗口大小时调用您的 colorchange()
函数。您可以使用如下代码处理“调整大小”事件:
$(window).on("resize",colorchange);
请注意,colorchange
作为参数传递给 .on()
function 没有括号,即 colorchange
而不是 colorchange()
。不带括号传递函数的引用,带括号立即调用函数并传递其结果。
演示:http://jsfiddle.net/dFbXr/1/
您提到了 Ajax,但 Ajax 与手头的问题完全无关:它用于在不重新加载整个页面的情况下从 Web 服务器发送和/或接收数据。
关于javascript - CSS + jquery 响应式背景颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15211313/