Question

不确定如何制作它以便滚动后导航框不透明直到悬停，我还想将CSS3 Transitions合并到此中。

这是没有悬停的工作代码：

  <Script>
window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
  }

  window.onscroll = function() {
    var box = document.getElementById('navbox'),
        scroll = getScrollTop();

    if (scroll <= 1) {
      box.style.top = "0px";
      box.style.opacity = "1";
    }
    else {
      box.style.top = (scroll + 0) + "px";
      box.style.opacity = "0.25";
    }
  };
};
</script>

我尝试添加var hoverbox = document.getElementById('navbox:Hover'),，然后使用以下方式使用不透明度：

if (scroll <= 1) {
  box.style.top = "0px";
  box.style.opacity = "1";
  navbox.style.opacity = "1";

但这也不起作用。

有关如何使悬停转换适用于JScript的任何建议？

Answer 1

请勿使用navbox:Hover。 jquery mouseover中有一个方法可以定义鼠标悬停在元素上后要执行的操作。或者，您可以使用addEventListener()来定义鼠标悬停事件。查看有关如何使用mouseover功能的文档。

Answer 2

你这样做是错的。使用此命令document.getElementById('navbox:Hover')，您要对浏览器说，抓住您的id等于'navbox：hover'的元素。您可以尝试使用CSS

<style>
  #navbox{
    transition-property: opacity;
    transition-duration: 1s;
  }
  #navbox:hover{
    opacity: 0.5;
  }
</style>

注意：转换属性在所有浏览器中都不可用。

Internet Explorer 10，Firefox，Chrome和Opera支持转换属性。

Safari需要前缀-webkit - 。

Internet Explorer 9及更早版本不支持转换属性。

Chrome 25及更早版本需要前缀-webkit - 。

在W3 Schools和Mozilla Developer Network中了解详情。

使用JS，你可以这样使用：

<script>
  function FadeIn(){
    this.style.opacity = "0.5";
  }
  function FadeOut(){
    this.style.opacity = "1";
  }
  function LoadEvents(){
    var div = document.getElementById("teste");
    div.addEventListener("mouseover", FadeIn, false);
    div.addEventListener("mouseout", FadeOut, false);
  }
</script>
<body onload="LoadEvents()">

但是，我建议使用JQuery，更容易。要了解有关addEventListener（）的更多信息，请在Mozilla Developer Network

中阅读

使用getScrollTop处理：悬停元素

2 个答案: