QuerySelectorAll div 并在鼠标悬停时更改其宽度 Javascript

Question

我是新手，我正在尝试 select 在我的 html 中添加多个 .card（灰色背景的分享）

并在鼠标悬停时更改其宽度，我还有 display:none 中的内容并使用 javascript 使所有内容都出现在鼠标悬停时，这是我的代码。谢谢理解。

var x = document.querySelectorAll(".card");
var i;

for (i = 0; i < x.length; i++) {
    x[i].style.width = "300px";
}

x.onmouseover = () => {
    x.style.width = "300px";
};

Answer 1

你可以稍微改变一下，让x.onmouseover在循环里面，例如：

for (i = 0; i < x.length; i++) {
  x[i].style.width = "300px";
  x[i].onmouseover = () => {
    //YOUR CODE HERE
  };
}

替代方法使用一种称为冒泡的技术，其中事件 'bubble' 从下方向上传递到父元素。使用它，你会得到这个：

document.body.onmouseover = (e)=>{
  if (e.target.classList.contains("card")) { //Check if event originator was a .card element
    //YOUR CODE HERE
  }
};

Answer 2

.querySelectorAll(".card") 将 return 一个 .card 元素的集合，所以

x.onmouseover = () => { ... };

不行。

您可以选择以下选项来执行您想要的操作。

通过遍历由 .querySelectorAll()

编辑的 return 集合，在所有 .card 元素上添加 mouseover 事件

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseover', (event) => {
    if (event.target.matches('.card')) {
      event.target.style.width = '150px';
    }
  });
});

.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
</div>

在所有.card元素的公共父元素上添加mouseover事件并使用Event.target属性，增加[=的宽度20=] 元素触发了 mouseover 事件

const container = document.querySelector('.container');

container.addEventListener('mouseover', (event) => {
  if (event.target.matches('.card')) {
    event.target.style.width = '150px';
  }
});

.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
</div>

使用 :hover 伪 class.

通过 CSS 执行此操作

.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.card:hover {
  width: 120px;
}

<div class="card"></div>
<div class="card"></div>

P.S: 与 :hover 不同，当任何 .card 元素的宽度在 mouseover 事件中增加时，它不会当鼠标指针移出 .card 元素时，t 将重置为原始宽度。如果您需要这样做并且不想使用 :hover 伪 class，您还需要添加 mouseout 事件。

Answer 3

将元素移动到循环内并为所有元素定义事件侦听器：

var x = document.querySelectorAll(".card");
var i;

for (i = 0; i < x.length; i++) {
  x[i].style.width = "300px";
  x[i].addEventListener('mouseover', function(){
      this.style.width = "350px";
  })    
}

.card{
height:20px;
 border:1px solid #ff8800;
 margin:5px;
}

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Answer 4

事件名称是mouseover和mouseout在javascript。

var x = document.querySelectorAll(".card");
x.forEach(item => {
   item.addEventListener("mouseover", () => {
    item.style.width = "400px";
  });
  item.addEventListener("mouseout", () => {
    item.style.width = "200px";
  });
})

.card {
  height: 200px;
  width: 200px;
  background: cyan;
  border: 1px solid black;
  transition: all 0.2s; 
}

<div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 5

var x = document.querySelectorAll(".card");

for(const el of x){
   el.onmouseover;
}

onmouseover = (el) => {
    el.target.style.width = "300px";
};

.card{
  border:1px solid red;
}

<div class="card" id="1">MyCard </div>
<div class="card"id="2">MyCard </div>

QuerySelectorAll div 并在鼠标悬停时更改其宽度 Javascript

QuerySelectorAll div and change its width onmouseover Javascript

javascript

onmouseover

queryselector