Question

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

问题是它会应用于页面上的每个图像。我想要的是，如果我鼠标悬停或点击，它只能应用于图像。

因为图像是由非技术作家使用的CMS插入的，所以他们没有技能进入图像标签本身插入一个类。这就是为什么我想要鼠标悬停或onclick触发的缩放CSS。

我很难获得一条javascript来完成这项工作，并希望得到一些帮助

Answer 1

您只需将事件绑定到代码并使用this：

   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");
   }

如果jQuery：

$('img').on('hover click', function() { 
       $(this).css('width','500px');
       $(this).addClass('image-scale');
});

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

img:hover {
   width: 500px;
}

您可以尝试使用

img:active

要检测到点击，但我相信它只会在鼠标按下时进行更改，只要他们放松它就不再是:active

Answer 2

您可以尝试使用CSS 3进行缩放。看看this fiddle。

<强> 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"/>

<强> CSS：

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);
}

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

2 个答案: