Question

当谈到javascript时，我是初学者，当我将鼠标悬停在另一个类上时，我正在尝试编写一个脚本来隐藏一个类。我已经编写了这段代码，但它不能像我希望的那样工作。有人可以给我一些指示，说明为什么这段代码不起作用，以及如何让它实现结果的一些建议我我正在寻找。

binding

修改

@Jonas

$(document).ready( function () {
    "use strict";
     document.getElementsByClassName('nav-bar').onmouseover = function(){

            document.getElementsByClassName('site-title').style.display="none";
    };

    document.getElementsByClassName('nav-bar').onmouseout = function(){

            document.getElementsByClassName('site-title').style.display="inline";
    };

});

这是你改编的代码。如果我做得不对，我不确定为什么它不起作用？

编辑2

$(document).ready( function () {
"use strict";
 document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";}
    );
  };
}
);

document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseout = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="inline";});
};});

});

这是我的html代码，我为这个令人困惑的状态道歉，因为这是我尝试制作的第一个网站，我不得不做很多试验和错误以及其他行为。我不安时就绝望了。

我有一个顶级菜单栏，其中包含子菜单。我设法用CSS做到了。

我遇到的问题是当我将鼠标悬停在子菜单上时，它们与网站标题重叠，这使得页面看起来很难看。我不想将网站标题向下移动，所以当我将鼠标悬停在初始菜单按钮上时，我想将其删除。我想在保持页面结构的同时这样做（即，这里有空白的地方）。

Answer 1

看来你正在使用jQuery。为什么不使用jQuery选择器和方法来实现您的目标。它更容易阅读和理解。有关更多信息，请查看以下页面：

试试这个例子：

$(document).ready( function () {
    $(document).on('mouseover', '.nav-bar', function() {
        jQuery('.site-title').css('display', 'none');
    });
    $(document).on('mouseout', '.nav-bar', function() {
        jQuery('.site-title').css('display', 'inline-block');
    });
});

Answer 2

GetElementsByClassName返回HTMLCollection。您需要循环，并添加到每个：

document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
    document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";});
};});

Answer 3

像在他的回答中提到的Dais一样，看起来你正在使用jQuery，所以为什么不使用内置的jQuery鼠标事件。要么是你从某个地方复制了你的代码而没有意识到$是jQuery的快捷方式，你的javascript需要包含jQuery。要包含jQuery，您需要在html中使用与下面类似的语句。这将包括来自谷歌内容传送网络（CDN）的jQuery。还有其他CDN可用，包括直接来自jQuery的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://api.jquery.com/category/events/mouse-events/

下面是一个使用jQuery事件和选择器的工作示例。

$(document).ready(function() {
  "use strict";
  $('#site-title').mouseover( function() {
    $('#site-title').hide(500);
  });

  $('#nav-bar').mouseleave( function() {
    $('#site-title').show(500);
  });
});

#site-title {
  position:absolute;
  background:red;
  width:100%;
  height:50px;
}

#nav-bar {
  position:absolute;
  background:green;
  width:100%;
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">I am the nav bar
  <button>Nav1</button>
  <button>Nav2</button>
  <button>Nav3</button>
</nav>
<header id="site-title">I am the site title</header>

将鼠标悬停在另一个非子/父/兄弟元素上时，我需要帮助隐藏元素

3 个答案: