Question

几个月前我做了这个，但现在我正在经历并重新调整它。它是页面底部的图像，单击它时会使用JavaScript将您带到顶部。

我已经完成了HTML，CSS和JS。但我无法让CSS正常工作。我想要一个小小的消息（“Scroll To Top”）保持隐藏，直到它悬停在它将出现的位置。

我尝试用JSFiddle在这里做一个演示，但它似乎不想工作。（http://jsfiddle.net/9jvuoxra/1/）

此外，今天我决定将图像变成背景图像，但我无法使用{display：block;}来正常工作。我已经把它用于过去的其他文件，但它不想工作。

<!-- Scroll to the top option -->

<script>
 function scroll () {
  window.scrollTo (0, 0);
 };
</script>

<div id="scroll-to-top">
 <a onclick="scroll ()">
  <span>Scroll To Top</span>
  <img src="img/scroll-to-top.png" alt="Scroll To Top" title="Return to top">
 </a>
</div>

<style>
 div#scroll-to-top {margin-left: auto; width: 42px; height: 42px;}
 div#scroll-to-top a {color: #ffffff;}
 div#scroll-to-top a span {visibility: hidden;}
 div#scroll-to-top a:hover span {visibility: visibile;}
 div#scroll-to-top span {position: absolute; margin: 10px 0px 0px 0px; width: 42px; font-size: 10px; text-align: center;}
 div#scroll-to-top img {display: block; width: 42px; height: 42px;}
 div#scroll-to-top img:hover {cursor: pointer;}
</style>

Answer 1

scroll(X, Y)已经是一个已定义的javascript函数，现在已被相同的函数scrollTo(X, Y)取代，因此使用scroll()可能无法正常工作（因为它不适用于jsfiddle）。相反，您可以编写<a onclick="window.scrollTo(0, 0)">来使其正常工作。

为了隐藏跨度，您可以使用jQuery。

确保同时删除visibility：hidden属性。

$(document).ready(function() {
    // hide the span
    $('#scroll-to-top span').hide();

    // bind the hover event (mouseenter) to show the span and
    // next hover event (mouseleave) to hide again
    $('#scroll-to-top').hover(function(){
        $('#scroll-to-top span').show();
    }, function() {
        $('#scroll-to-top span').hide();
    });

});

隐藏<span>直到<div>悬停在</div> </span>上

1 个答案: