我目前有一系列带有翻转动画的容器,可以在悬停时激活。我希望他们不仅可以在悬停时激活,还可以使用单个按钮切换翻转全部按下javascript按钮。
HTML:
json_decode($jsondata, true);
对于我使用的对象重复这些对象并依赖于以下CSS:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<a href="link1.html">
<img src="images/frontimg1.jpg"/>
</a>
</div>
<div class="back">
<div class="fliplinks">
<a href="link1.html">
<p>text1</p>
</a>
</div>
</div>
</div>
</div>
编辑:按要求提供jsfiddle:https://jsfiddle.net/futbyyef/
答案 0 :(得分:0)
假设他们都有.flip-container
类,你可以添加这样的函数。
<script>
$('.toggle-button').click(function(){
$('.flip-container').toggleClass('hover');
}
</script>
然后你只需要包含一个按钮来切换它。像
这样的东西<button class="toggle-button">Test Button</button>
这是一个有效的fiddle。确保在页面上包含jQuery。