Question 1You are creating a web page that will have a div element with a class attribute that has a value of “child.” The element is formatted to look like a box. When the mouse hovers over the object, it should double in size and move to the right and down. You have created the style rule for the object:Now you need to create the style rule that will move the box when the mouse hovers over it.What rule should you create?1 point.child:hover { transform: scale(2) translate(-30px,30px); }.child:hover { transform: scale(30px,30px) translate(2); }.child:hover { transform: scale(2) translate(30px,30px); }.child:hover { transform: scale(2) translate(30px,-30px); }

Question 1You are creating a that has two div elements that have formatting applied. In testing, the two elements box look like this:When the user hovers over the smaller rectangle, you would like it to look like this:The yellow box has been formatted with the following style rule:You have begun creating the style rule that will be used when the user hovers over the yellow rectangle:What should you type in the blank space? (Remember, properties, values and functions should be in lower case.)

You are creating a web page with a div element formatted to look like a red box. When the user hovers over the element, the width of the element should expand slowly to 300% of the original size. You are creating a style rule for the transition:What should you type in the blank space? 1 point300%speedgrowwidth

Question 2You are creating a web page that will have an image on it:Each box is created by a div element. You need to create the style rule that will generate the yellow box. Which rule should you create?1 point.child { width: 80%; height: 80%; position: absolute; top: 30px; left: 50px; background-color: yellow; border- radius: 56px; }.child { width: 80%; height: 80%; position: absolute; top: 30px; left: 50px; background-color: yellow; border-top-left-radius: 56px; border-bottom-right-radius: 56px; }.child { width: 80%; height: 80%; position: absolute; top: 30px; left: 50px; background-color: yellow; border-bottom-left-radius: 56px; border-bottom-right-radius: 56px; }.child { width: 80%; height: 80%; position: absolute; top: 30px; left: 50px; background-color: yellow; border-top-left-radius: 56px; border-top-right-radius: 56px; }

Which CSS property is used to control the appearance of an element when it is hovered over by the mouse pointer?Options:hoveron-hoverhover-effectactive

Which CSS property is used to control the appearance of an element when it is hovered over by the mouse pointer?Optionshover-effectactive:hoveron-hover