javascript - 使用 JavaScript 而不是 jQuery 在鼠标悬停时更改 div 内的图像宽度

Question

我是 JavaScript 新手，我很难解决这个问题。

页面上有三个 div：

div 1 的 ID 为“div1”，上面有三个图像：

• ID：im1，src = Cat.jpg
• ID：im2，src = Dog.jpg
• ID：im3，src = Fish.jpg

Div 2 的 ID 为“div2”，其中包含三个段落。在每个文本中添加一些随机文本，但要确保它们的 ID 为“p1”、“p2”和“p3”</p>

Div 3 的 ID 为“div3”，有两个段落（ID p4 和 p5；在每个段落中放入随机文本）和两个图像（ID im4 和 im5；src = Bird.jpg 和 src = Turtle.jpg。

当窗口完成加载时，必须通过 JavaScript 设置以下行为（不要使用 jQuery）：

• 当鼠标悬停在 div1 中时，每个图像都必须调整为 100px 宽度
• div3 中的每个段落必须在鼠标悬停时获得黄色背景色

Answer 1

您可以使用 CSS 完成此操作

#div1 img:hover{ width:100px; }
#div3 p:hover{ background:yellow; }