Question

我是Javascript的新手，我正在一个网站上工作，该网站有一个全宽度滑块和滑块下方的一组按钮，这些按钮部分可见，具体取决于屏幕尺寸。我设置了一个变换：在按钮上翻译css，这样当你将鼠标悬停在每个按钮的可见部分上时，它将向上变换以显示按钮的其余部分。但只有在屏幕上看不到完整按钮时才需要这样做。向下滚动页面并显示整个buttons_container div后，需要禁用转换css。

当您向下滚动按钮进入完整视图时，有没有办法禁用此转换css？我们可以将它基于屏幕/窗口大小，使其在移动/平板电脑设备中运行吗？

这是我到目前为止所拥有的：

<div id="slider"></div>
<div id="button_container">
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div> 
</div>

这里是css

.hp_buttons { 
float:left; 
width:33%; 
transform:translate(0,0); 
-webkit-transition: all.2s ease-in-out; 
-moz-transition: all.2s ease-in-out; 
-o-transition: all .2s ease-in-out; 
-ms-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 
}
.hp_buttons:hover { 
transform:translate(0,-80%); 
}

提前致谢。

Answer 1

以下是您预期效果的良好描述和代码示例：

How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

Answer 2

你可以处理滚动事件并检查元素是否可见，然后在元素中添加或删除类，链接：

$(window).scroll(function(){
   if ($('#elementId').visible()) {
     $('#elementId').removeClass('hp_buttons');
   } else {
     $('#elementId').addClass('hp_buttons');
   }
})

要验证元素是否可见，您可以使用以下代码： https://github.com/customd/jquery-visible

希望它有所帮助。

javascript根据屏幕上的div可见性删除css

2 个答案: