Question

这是我的新手，我正在尝试在HTML中选择多个 .card （灰色背景颜色的共享）

并在onmouseover上更改其宽度，我也有display:none中的内容，并使用javascript使它们全部出现在onmouseover上，这是我的代码。谢谢您的理解。

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

.querySelectorAll(".card")将返回.card元素的集合，所以

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

不起作用。

您有以下选择来做自己想做的事。

通过遍历mouseover返回的集合，在所有.card元素上添加.querySelectorAll()事件

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>

在所有mouseover元素的公共父元素上添加.card事件，并使用Event.target属性，增加触发{的.card元素的宽度{1}}事件

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>伪类通过CSS进行操作。
```
:hover
```
```
.card {
  background: blue;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.card:hover {
  width: 120px;
}
```

PS：与<div class="card"></div> <div class="card"></div>不同的是，:hover事件中任何.card元素的宽度增加时，鼠标指针都不会重置为原始宽度从该mouseover元素中移出。如果您需要这样做，并且不想使用.card伪类，则还需要添加:hover事件。

Answer 2

您可以对其稍作更改，以使x.onmouseover位于循环内，例如：

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

替代方法使用一种称为 bubbling 的技术，其中事件从下面“冒泡”到父元素。使用它，您会得到：

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

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

javascript中的事件名称为mouseover和mouseout。

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时更改其宽度

5 个答案: