Javascript 鼠标悬停或onclick触发CSS缩放？

我有一些CSS可以缩放图像，效果很好

问题是它会应用于页面上的每个图像。我想要的是，如果我将鼠标悬停或单击，则仅将其应用于图像

因为图像是由非技术作者使用的CMS插入的，所以他们不具备进入图像标记本身以插入类的技能。这就是为什么我希望由mouseover或onclick触发缩放CSS

---

我一直在努力获取一段javascript来完成这项工作，希望能得到一些帮助

您只需将事件绑定到标记并使用

此

：

   var images = document.getElementsByTagName("img");
   for (var i=0;i<images.length;i++) {
        images[i].onmouseover = imgScale;
        images[i].onclick = imgScale;
   }
   function imgScale(e) {
       this.style.width = 500px; //whatever
       this.setAttribute("class", "image-scale");
   }

更好的是，如果您只需要悬停，您可以使用CSS：

img:hover {
   width: 500px;
}

你可以尝试使用

img:active

---

要检测点击，但我相信它只会在按下鼠标时进行更改，一旦鼠标停止，它就不再是活动的，您可以尝试使用CSS 3进行缩放。看一看

HTML:

<img src="http://lorempixel.com/200/200/sports"/>
<img src="http://lorempixel.com/200/200/nature"/>
<img src="http://lorempixel.com/200/200/city"/>
<img src="http://lorempixel.com/200/200/sports"/>
<img src="http://lorempixel.com/200/200/animals"/>

img {
    -webkit-transition: all 300ms 0ms ease-in-out;
    transition: all 300ms 0ms ease-in-out;
    width: 50px;
}

img:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

---

您是否正在尝试扩展cms编辑器，以允许非技术编辑器将css缩放应用于他们插入的图像？您是否尝试了

：hover

css伪选择器？很好，您可以显示一些代码吗？非常感谢您费心回复。我很感激。哈弗做了一个完美的解决方案。我不知道image:hover，尽管我事先阅读了所有我能找到的东西，但这项技术完全符合我们的要求。如果您想在单击时在图像之间切换，可以使用

img:focus

@StefanYoungs

img {
    -webkit-transition: all 300ms 0ms ease-in-out;
    transition: all 300ms 0ms ease-in-out;
    width: 50px;
}

img:hover {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}