隐藏 <span> 直到 <div> 悬停

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。

确保也删除可见性：隐藏属性。

$(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> 悬停

Hide <span> until <div> is hovered over

html

javascript

css

scroll