如何在悬停时显示和隐藏 div 中的某些元素？答案

【问题标题】：How do I show and hide some elements in a div on hover?如何在悬停时显示和隐藏 div 中的某些元素？
【发布时间】：2021-04-19 22:21:19
【问题描述】：

当我将鼠标悬停在 div 上并隐藏其中的文本时，我试图在 div 中显示按钮，然后隐藏按钮但显示 div 的文本。我不断收到未定义的错误。我做错了什么？

错误：

coreScript.js:12 Uncaught TypeError: Cannot set property 'display' of 未定义

在 showButton (coreScript.js:12)

在 HTMLDivElement.onmouseover (Core.html:33)

coreScript.js:6 Uncaught TypeError: Cannot set property 'display' of 未定义

在 hideButton (coreScript.js:6)

在 HTMLDivElement.onmouseout (Core.html:33)

function hideButton() {
  document.getElementsByClassName('xOne').style.display = 'none';
  document.getElementsByClassName('xTen').style.display = 'none';
  document.getElementsByClassName('all').style.display = 'none';
  document.getElementsByClassName('name').style.display = 'block';
}

function showButton() {
  document.getElementsByClassName('xOne').style.display = 'block';
  document.getElementsByClassName('xTen').style.display = 'block';
  document.getElementsByClassName('all').style.display = 'block';
  document.getElementsByClassName('name').style.display = 'none';
}

.main-div {
  border: 1px solid black;
  min-width: 198px;
  max-width: 198px;
  min-height: 33px;
  max-height: 33px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  margin: 5px;
  line-height: 34px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  animation: boxShadowNone 0.1s;
  box-shadow: none;
}

<div class="main-div" onmouseover="showButton()" onmouseout=" hideButton()" onclick="sell()" id="sellMeat">
  <div class="name">SELL MEAT</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

<br>

<div class="main-div" onmouseover="showButton()" onmouseout="changeText(this, 'SELL LEATHER', '16px'); hideButton()" onclick="sell()" id="sellLeather">
  <div class="name">SELL Leather</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

【问题讨论】：

标签： javascript html

【解决方案1】：

getElementsByClassName 返回一个HTMLCollection ，它是所有子元素的类数组对象。

将getElementsByClassName(class) 替换为querySelector(.class) 以获得正确的行为。

您也可以使用getElementsByClassName(class)[0] 来访问该元素，但我认为querySelector 非常适合这个特定的用例。

function hideButton(e) {
  const element = e.currentTarget;
  element.querySelector('.xOne').style.display = 'none';
  element.querySelector('.xTen').style.display = 'none';
  element.querySelector('.all').style.display = 'none';
  element.querySelector('.name').style.display = 'block';
}

function showButton(e) {
 const element = e.currentTarget;
  element.querySelector('.xOne').style.display = 'block';
  element.querySelector('.xTen').style.display = 'block';
  element.querySelector('.all').style.display = 'block';
  element.querySelector('.name').style.display = 'none';
}

.main-div {
  border: 1px solid black;
  min-width: 198px;
  max-width: 198px;
  min-height: 33px;
  max-height: 33px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  margin: 5px;
  line-height: 34px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  animation: boxShadowNone 0.1s;
  box-shadow: none;
}

<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellMeat">
  <div class="name">SELL MEAT</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

<br>

<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellLeather">
  <div class="name">SELL Leather</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

【讨论】：

当我将鼠标悬停在第二个按钮上时显示错误，如何解决？
您没有在问题中包含这些函数的代码。这就是为什么。
我的意思是它根本没有显示 xOne、xTen 和所有在出售皮革按钮中。我还需要为这些创建另一个函数吗？
更新了我的代码。删除了未定义的函数，而不是在 document 上查询，现在我们在 currentTarget 上进行查询，即附加处理程序的位置，只是试图查看查询它的子元素。

【解决方案2】：

Lakshya Thakur 为您提供了各种出色的解决方案。正如他所说，getElementsByClassName 返回一个集合；但是如果您想将样式应用于具有特定类的所有元素（以防您将来拥有多个元素），您可以在循环中应用样式。

function hideButton() {
      document.getElementsByClassName('xOne').forEach(
                   element => element.style.display = 'none'; 
      );
}

我不尝试代码，但这是逻辑。

【讨论】：