英文:
How to transform image on click instead of hover
问题
我有一个使用CSS的简单图像库，当用户悬停在缩略图图像上时，它会进行变换、缩放和旋转。
这是一个使用JS Fiddle的示例：示例
.container { overflow:auto;height:800px; }
.container img { transition: all 1s; box-shadow: -3px 1px 5px rgba(0,0,0,.5); }
div.container table { margin-top: 85px; }
div.container table th { text-align:center; }
div.container table td:first-child { text-align:center; }
div.container table td:first-child + td { text-align:center; }
div.container table tr:first-child + tr { text-align:center; }
div.container table tr:first-child + tr td { padding:10px; }
div.container table td img { width:40%; }
div.container img:hover { transform: scale(3.0) rotate(-10deg) }
<div class="container">
<table border="0">
<tr>
<th width="20%">Image Width</th>
<th width="20%">Image Height</th>
<th width="20%">Location</th>
<th width="20%">Internal Notes</th>
<th width="20%">External Notes</th>
</tr>
<tr>
<td>10.5"</td>
<td>12.75"</td>
<td>Left Hip</td>
<td>Heat Transfer - 49/51</td>
<td>Fine details in artwork will diminish.</td>
</tr>
<tr>
<td></td>
<td colspan="2"><img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg"></td>
<td colspan="2"><img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg"></td>
</tr>
</table>
</div>
而不是在用户悬停在图像上时进行图像变换，我想要更改为当用户点击图像时进行图像变换。然而，我不认为CSS有一种跟踪点击事件的方式。
我正试图找出从图像悬停更改为图像点击的最简单方法。其他一切都应保持不变。我唯一要做的更改是在用户点击缩略图图像时进行图像变换，而不是在用户悬停在图像上时进行变换。您有关于如何实现这一目标的建议吗？
英文:
I have a simple image gallery using CSS that when the user hovers over the thumbnail image, it is transformed, scaled, and rotated.
Here is an example using JS Fiddle: Example
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
.container { overflow:auto;height:800px; }
.container img { transition: all 1s; box-shadow: -3px 1px 5px rgba(0,0,0,.5); }
div.container table { margin-top: 85px; }
div.container table th { text-align:center; }
div.container table td:first-child { text-align:center; }
div.container table td:first-child + td { text-align:center; }
div.container table tr:first-child + tr { text-align:center; }
div.container table tr:first-child + tr td { padding:10px; }
div.container table td img { width:40%; }
div.container img:hover { transform: scale(3.0) rotate(-10deg) }
<!-- language: lang-html -->
<div class="container">
<table border="0">
<tr>
<th width="20%">Image Width</th>
<th width="20%">Image Height</th>
<th width="20%">Location</th>
<th width="20%">Internal Notes</th>
<th width="20%">External Notes</th>
</tr>
<tr>
<td>10.5"</td>
<td>12.75"</td>
<td>Left Hip</td>
<td>Heat Transfer - 49/51</td>
<td>Fine details in artwork will diminish.</td>
</tr>
<tr>
<td></td>
<td colspan="2"><img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg"></td>
<td colspan="2"><img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg"></td>
</tr>
</table>
</div>
<!-- end snippet -->
Instead of the image transformation happening when the user hovers over the image, I'd like to change it so the image is transformed when the user clicks on the image. However, I don't believe CSS has a way to track click events.
I'm trying to figure out the simplest approach to change from image hover to image click. Everything else should stay the same. The only change I'm trying to make is have the image transformation happen when the user clicks the thumbnail image instead of having it happen when the user hovers over the image. Any suggestions on how to accomplish this?
答案1
得分: 0
最简单的方法是将CSS中的 hover 替换为 active，但一旦图像扩大，就没有办法使其恢复到正常状态...
div.container img:active { transform: scale(3.0) rotate(-10deg); }
除非你在主要的CSS中添加缩小功能...
div.container table td img { width: 40%; transform: scale(1) rotate(0deg); }
另外，JS可以拯救你，你可以直接在HTML元素上轻松添加这样的功能...
onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';"
onmouseout="this.style.transform='scale(1) rotate(0deg)';"
因此，最终结果现在看起来像这样...
<img onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" onmouseout="this.style.transform='scale(1) rotate(0deg)';" src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
这两种方法都可以，选择适合你的。CSS看起来最简单。
英文:
Well the easiest way is to replace CSS hover with active but once the image expands there’s no way for it to deflate back to normal again ...
div.container img:active { transform: scale(3.0) rotate(-10deg); }
Unless you add the deflation in its main CSS...
div.container table td img { width:40%; transform: scale(1) rotate(0deg);}
Alternatively JS comes to the rescue with which you can easily add such functionality directly on your HTML elements...
onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';"
onmouseout="this.style.transform='scale(1) rotate(0deg)';"
So the end result will now look like this...
<img onmousedown="this.style.transform='scale(3.0) rotate(-10deg)';" onmouseout="this.style.transform='scale(1) rotate(0deg)';" src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
Both methods are fine so choose whichever pleases you. CSS looks the easiest.
答案2
得分: -1
你可以在特定的类上设置transform，而不是在:hover伪类上。
div.container img.transformed { transform: scale(3.0) rotate(-10deg) }
然后，你可以在容器上附加一个点击事件监听器，当点击图像时会添加该类。
document.querySelector('.container').addEventListener('click', e => {
if (e.target.matches('img')) e.target.classList.add('transformed');
});
当点击已经转换过的图像时，你可以使用.classList.toggle而不是.add来移除转换。
英文:
You can set the transform on a specific class instead of the :hover pseudo class.
div.container img.transformed { transform: scale(3.0) rotate(-10deg) }
Then, you can attach a click event listener to the container that adds that class when an image is clicked.
document.querySelector('.container').addEventListener('click', e => {
if (e.target.matches('img')) e.target.classList.add('transformed');
});
You can use .classList.toggle instead of .add to remove the transform when clicking on an already transformed image.
答案3
得分: -1
> 然而，我不相信CSS有一种追踪点击事件的方法。
事实上，CSS确实有[这样的方法](https://stackoverflow.com/a/32721572)。它并不完美，但在这种情况下可能对你有用。
首先，将每个`<img>`包裹在一个`<label>`中，并在其前面放置一个`<input type="checkbox">`：
```html
<label>
<input type="checkbox">
<img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
</label>
然后，将:hover规则改为：
input:checked + img {
transform: scale(3.0) rotate(-10deg);
}
记得隐藏那些复选框：
input[type="checkbox"] {
display: none;
}
一旦通过相应的<label>勾选了复选框，旁边的<img>将会发生变化。
试试吧：
input[type="checkbox"] {
display: none;
}
input:checked + img {
transform: scale(3.0) rotate(-10deg);
}
/* 原始样式 */
.container {
overflow: auto;
height: 800px;
}
.container img {
transition: all 1s;
box-shadow: -3px 1px 5px rgba(0, 0, 0, .5);
}
div.container table {
margin-top: 85px;
}
div.container table th,
div.container table td:first-child,
div.container table td:first-child + td,
div.container table tr:first-child + tr,
div.container table tr:first-child + tr td {
text-align: center;
}
div.container table td img {
width: 40%;
}
| Image Width | Image Height | Location | Internal Notes | External Notes |
|---|---|---|---|---|
| 10.5" | 12.75" | Left Hip | Heat Transfer - 49/51 | Fine details in artwork will diminish. |
<details>
<summary>英文:</summary>
> However, I don't believe CSS has a way to track click events.
In fact, CSS *do* have [such a method](https://stackoverflow.com/a/32721572). It's not perfect, but in this case it may be of use to you.
First, wrap each `<img>` in a `<label>` and put a `<input type="checkbox">` before it:
```html
<label>
<input type="checkbox">
<img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
</label>
Then, change the :hover rule to this:
input:checked + img {
transform: scale(3.0) rotate(-10deg);
}
Do remember to hide those checkboxes:
input[type="checkbox"] {
display: none;
}
Once a checkbox is :checked via the corresponding <label>, the <img> lies next to it will be transformed.
Try it:
<!-- begin snippet: js hide: true -->
<!-- language: lang-css -->
input[type="checkbox"] {
display: none;
}
input:checked + img {
transform: scale(3.0) rotate(-10deg);
}
/* Original styles */
.container {
overflow: auto;
height: 800px;
}
.container img {
transition: all 1s;
box-shadow: -3px 1px 5px rgba(0, 0, 0, .5);
}
div.container table {
margin-top: 85px;
}
div.container table th,
div.container table td:first-child,
div.container table td:first-child + td,
div.container table tr:first-child + tr,
div.container table tr:first-child + tr td {
text-align: center;
}
div.container table td img {
width: 40%;
}
<!-- language: lang-html -->
<div class="container">
<table border="0">
<tr>
<th width="20%">Image Width</th>
<th width="20%">Image Height</th>
<th width="20%">Location</th>
<th width="20%">Internal Notes</th>
<th width="20%">External Notes</th>
</tr>
<tr>
<td>10.5"</td>
<td>12.75"</td>
<td>Left Hip</td>
<td>Heat Transfer - 49/51</td>
<td>Fine details in artwork will diminish.</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<label>
<input type="checkbox">
<img src="https://i.postimg.cc/Tw4H40yY/thumbnail-27d67c5eb4-221900-blackhemtag-flat-221900.jpg">
</label>
</td>
<td colspan="2">
<label>
<input type="checkbox">
<img src="https://i.postimg.cc/VLRHyz0V/thumbnail-32136cc21e-221900-blackhemtag-thumb-221900.jpg">
</label>
</td>
</tr>
</table>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论