Question

所以我想制作一个标题导航栏，该导航栏在悬停时会增大，并在光标离开该区域时自动隐藏。

当鼠标悬停时，我希望它的高度增加。我通过尝试切换类isShown

来做到这一点

要做到这一点，我将使用修饰符类，将高度从0.2em增加到2em。另外，因为隐藏时条是如此之小，所以我还有另一个元素不可见div包裹了它的高度的两倍，以便在标头附近拾取悬浮的光标。

这些是CSS类：

.hover_box{
  display:block;
  position:absolute;

  top:0;

  height:4em;
  width:100%;
}

header{
  display:block;
  position:absolute;

  top:0;
  height:0.2em;
  width:100%;

  background-color:#FFBB00;
}

header.isShown{
  height:2em;
}

我没有发现类有什么问题，但是我认为这是我编写的处理“ mouseover”事件的Jquery中的问题。

这是我用于事件处理的代码：

$("header, .hover_box").mouseover(function(e){
    console.log("hovered over header")
    let elem = document.getElementsByTagName("header")[0];
    console.log("${e.target.tagName} targeted")
    elem.toggleClass("isShown");
  } 
);

Answer 1

您有from googletrans import Translator translator = Translator() text = translator.translate('text', src='en', dest='ru') print(text.text)，但是通过elem.toggleClass("isShown")调用定义了elem。 toggleClass是jQuery方法。 getElementsByTagName是本机方法，不返回jQuery对象，而是获取本机DOM元素。因此getElementsByTagName()不是jQuery对象。这应该会在JavaScript控制台上给您一个关于elem不是函数的错误。

要解决此问题，请使toggleClass()为jQuery对象

elem

或使用本地classList.toggle()通话

let elem = jQuery("header");
elem.toggleClass("isShown")

多个元素上的jQuery切换类

1 个答案: