why the hover- transform effect is not working?-CodePudding

I am trying to make a hover effect to enlarge the text when hovering on it by using transform as the code below, but the CSS doesn't take any effect.

CSS

.iphone14-link:hover {
  transform: scale(1.4);
}

HTML

 <span > iPhone 14 </span>

CodePudding user response：

The :hover pseudo tag does not work on span classes. You can try replacing span with div.

CodePudding user response：

Try this:

HTML

<div > iPhone 14 </div>

CSS

.iphone14-link:hover {
    color: red;
    transform: scale(1.4);
}