<分区>
我是 Javascript 的新手，我在一个网站上工作，该网站有一个全宽 slider 和 slider 下方的一组按钮，根据屏幕尺寸，这些按钮部分可见。我在按钮上设置了一个 transform:translate css，所以当你将鼠标悬停在每个按钮的可见部分时，它会向上变换以显示按钮的其余部分。但这只有在屏幕上看不到完整按钮时才有必要。向下滚动页面并显示整个 buttons_container div 后，需要禁用转换 css。
当您向下滚动时，一旦按钮进入全 View ，是否有办法禁用此转换 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%);
}
提前致谢。