我正在建立一个响应网站，当浏览器的宽度大于500px时，.bio内容将被隐藏，当它在手机上时，它将显示出来。
好事是，它可以正常工作，但要在这些尺寸内加载页面时有效。因此，如果我的Firefox窗口为400px，并且将窗口的大小调整为900，则该生物仍然可见。如果我以900px加载页面，则该简历将被隐藏，因为它应该是。
当窗口大小更改时，如何使jQuery再次启动？
$(function(){
if($(window).width() > 500){
$('.speakers li').hover(function(){
$(this).find('.hide').toggle();
});
}else{
$('.speakers li .bio').removeClass('hide');
}
});
正如MackieeE所建议的那样，仅使用媒体查询就可以使用CSS来解决。
一开始让我无法使用媒体查询的原因是显示内容已被display：none隐藏。在这种情况下，：hover不可用，因为没有内容可以悬停。不透明度是诀窍。
我想，如果需要单击透明div下的链接，则可以使用绝对定位来交换z-index。
.ease {-webkit-transition:All 0.15s ease; -moz-transition:All 0.15s ease; -o-transition:All 0.15s ease; -ms-transition:All 0.15s ease; transition:All 0.15s ease;}
.bio {
@media(min-width:@screen){
opacity:0;
/* more style */
}
@media(max-width:@phone){
opacity:1;
/* more style */
}
}
.bio:hover {
@media(min-width:@screen){
.ease;
opacity:1;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句