Question

I am new in JavaScript and I have difficulties fixing this.

There are three divs on the page:

Div 1 has an ID of “div1” and has three images on it:

• ID: im1, src = Cat.jpg
• ID: im2, src = Dog.jpg
• ID: im3, src = Fish.jpg

Div 2 has an ID of “div2” and has three paragraphs in it. Put some random text in each one, but make sure they have an ID of “p1” and “p2” and “p3”

Div 3 has an ID of “div3” and has two paragraphs (ID p4 and p5; put random text into each one) and two images (ID im4 and im5; src = Bird.jpg and src = Turtle.jpg.

When the window finishes loading, the following behaviors must be set up by JavaScript (do not use jQuery):

• Each image in div1 must be resized to 100px width when the mouse is over it
• Each paragraph in div3 must get a yellow background color when the mouse is over it

Answer 1

You can accomplish this with CSS

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