Question

我正在努力实现以下的css解决方案：

https://jsfiddle.net/slinger55/fdL8xrk8/3/

#toggle{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
span{
  display: none;
}
#toggle:checked + span{
  display: block;
}
img{
  cursor: pointer;
}

<label for="toggle">
  <img style="width: 100%" src="http://i.imgur.com/pOFyUBh.png" />
</label>
<input type="checkbox" id="toggle" />
<span>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius bibendum turpis, ac viverra libero scelerisque sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ipsum metus, dictum in feugiat sit amet, finibus vitae tortor. Cras vestibulum magna vel enim elementum, nec elementum risus mattis. Sed sodales velit vitae elit sagittis convallis vulputate non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et dictum arcu. Duis sed efficitur massa, sit amet pulvinar ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce interdum felis at ligula semper, sit amet aliquam ex venenatis. Etiam feugiat pellentesque dapibus.</p>

</span>

每当我点击图片显示文字时，页面就会跳到顶部。这是嵌入在Wordpress页面上的，所以只有在可能的情况下才能坚持使用css。有没有人有任何想法如何解决这个问题？

感谢。

Answer 1

尝试使用span元素。它将解决问题

在复选框点击停止页面到顶部（图像显示在下面）

1 个答案: