小编Wil*_*yan的帖子

我在悬停在图像上时试图显示描述.我已经用不太理想的方式完成了它,使用图像精灵和徘徊在这里:http://willryan.us/design.html我希望它看起来与我拥有它完全一样,但使用真实文本代替图片.

我尝试了一些不同的东西,但我似乎无法弄清楚如何做到这一点.我只是尝试使用HTML和CSS,但我不确定这是否可行.

请随意在我的代码中浏览,我会粘贴我认为相关的内容.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
} …

我在一个页面上有几个html5视频,我刚刚意识到当你访问该页面时,所有视频都开始加载,即使我没有点击任何一个上面的游戏.

有没有办法只在点击播放时加载视频,以防止不必要的下载？

我按照教程来获得一个粘性的"返回顶部"按钮,一旦向下滚动就会出现.出于某种原因,在页面首次加载后,当您位于页面顶部时,它会显示.如果向下滚动,然后一直向上,它就会消失(应该如此).但最初它表现不佳.任何的想法？

这是我正在使用它的实时页面,你可以在右下角看到它:http://willryan.us

HTML

<a href="#" class="go-top" style="display: inline;">Back to top</a>


<script>
        $(document).ready(function() {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $('.go-top').fadeIn(500);
                } else {
                    $('.go-top').fadeOut(300);
                }
            });

            // Animate the scroll to top
            $('.go-top').click(function(event) {
                event.preventDefault();

                $('html, body').animate({scrollTop: 0}, 300);
            })
        });
    </script>

CSS

.go-top {
    position: fixed;
    bottom: 0.75em;
    right: 0.5em;
    text-decoration: none;
    color: white;
    background-color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
    padding: 10px;
    display: none;
    margin: 0; …

我刚注意到我个人网站上的视频没有在Safari中播放.我试过两台电脑,点击播放什么也没做.它们在Chrome,Opera和Firefox中运行良好,但不适用于Safari.它是编解码器/编码问题吗？

链接:http://imwillryan.com/uiuc-timelapse.html

码:

<video controls preload="none" poster="assets/video/poster_uiuc-timelapse.jpg" data-setup="{}">
     <source src="assets/video/uiuc-timelapse.mp4" type="video/mp4" />
     <source src="assets/video/uiuc-timelapse.ogv" type='video/ogg; codecs="theora, vorbis"' />
     <source src="assets/video/uiuc-timelapse.webm" type='video/webm; codecs="vp8, vorbis"' />
     Your browser does not support the HTML5 video tag. Try updating your browser or using a different one.
</video>