英文:
How to make make an image rotate when hovering over different image using CSS?
问题
在我的HTML代码中有2个图像。当我悬停在一个图像上时，我希望另一个图像开始旋转，并保持旋转，直到我停止悬停。如何编写我的CSS来实现这一目标？我的两个图像都是PNG文件。
第一次尝试：在这里，我悬停的图像的ID是“image_hov”，应该旋转的图像的ID是“image_rot”。以下是与第一次尝试相关的HTML代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:\Users\USER\Downloads\imgs\hov.png" alt="image_hover">
<img id="image_rot" src="C:\Users\USER\Downloads\imgs\rot.png" alt="image_rotate">
</div>
</span>
</body>
</html>
CSS
#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #image_rot {
animation: rotation 2s infinite linear;
}
第二次尝试：我将“image_rot”包含在一个div中，并尝试调用该div并旋转它，希望图像也会随之旋转。我给该div一个ID称为“div_rot”。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:\Users\USER\Downloads\imgs\hov.png" alt="image_hover">
<div id="div_rot">
<img id="image_rot" src="C:\Users\USER\Downloads\imgs\rot.png" alt="image_rotate">
</div>
</div>
</span>
</body>
</html>
CSS
#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
}
#div_rot {
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #div_rot {
animation: rotation 2s infinite linear;
}
上述两次尝试都没有成功。有人可以帮助我找出哪里出错了吗？
或者：我应该如何更新代码才能使其正常工作？
我将非常感谢。
英文:
In my HTML code there are 2 images. When I hover over one image I want the other image to start and keep rotating until I stop hovering. How to code my css to make this happen? Both my images are png files.
First attempt: here the id of the image I hover to make the other image rotate is "image_hov" and the id of the image that is supposed to be rotating is "image_rot". Here is the html code related to the first attempt:
HTML
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:\Users\USER\Downloads\imgs\hov.png" alt="image_hover">
<img id="image_rot" src="C:\Users\USER\Downloads\imgs\rot.png" alt="image_rotate">
</div>
</span>
</body>
</html>`
CSS
`#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #image_rot {
animation: rotation 2s infinite linear;
}`
Second attempt:
I contained "image_rot" inside of a div and tried calling the div and rotating it, hoping that the image would rotate along with it. I gave that div an id called "div_rot".
HTML
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:\Users\USER\Downloads\imgs\hov.png" alt="image_hover">
<div id="div_rot">
<img id="image_rot" src="C:\Users\USER\Downloads\imgs\rot.png" alt="image_rotate">
</div>
</div>
</span>
</body>
</html>`
CSS
`#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
}
#div_rot {
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #div_rot {
animation: rotation 2s infinite linear;
}`
None of the above attempts worked. Can anyone help me find where I went wrong?
or: How should I update the code to make this work?
I will be very thankful
答案1
得分: 1
这是我会这样做的：
<!-- 开始代码段：JavaScript 隐藏：false 控制台：true Babel：false -->
<!-- 语言：CSS -->
#image1:hover~#image2 {
animation: rotateImg 3s linear infinite;
}
#image2:hover~#image1 {
animation: rotateImg 3s linear infinite;
}
@keyframes rotateImg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!-- 语言：HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image1" src="https://picsum.photos/200/300" alt="image_hover">
<img id="image2" src="https://picsum.photos/200/300" alt="image_rotate">
</div>
</span>
</body>
</html>
<!-- 结束代码段 -->
这里使用了 "~"，这是通用兄弟选择器。这意味着当具有id image1的元素被悬停时，它会查找具有id image2的下一个元素，并在那里应用动画。不幸的是，这仅适用于下一个元素（所以只有当image1被悬停时）。要使其另一种方式也能工作，您需要使用JavaScript。希望这修复了问题。
此外，您需要重新应用其他样式。
英文:
This is how I would do it:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#image1:hover~#image2 {
animation: rotateImg 3s linear infinite;
}
#image2:hover~#image1 {
animation: rotateImg 3s linear infinite;
}
@keyframes rotateImg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image1" src="https://picsum.photos/200/300" alt="image_hover">
<img id="image2" src="https://picsum.photos/200/300" alt="image_rotate">
</div>
</span>
</body>
</html>
<!-- end snippet -->
This uses the ~, which is the general sibling combinator. This means that when an element with id image1 is hovered, it looks for the next element with id image2 and applies the animation there. Sadly this only works for the next element (so only when image1 is hovered). You would need to use JavaScript to make it work the other way as well. I hope this fixes the issue.
Also you will need to reapply your other styles.
答案2
得分: 0
在你的代码中，我没有看到旋转动画，要使用CSS动画，你必须首先为动画指定一些关键帧。
另外，你没有使用正确的选择器，你应该使用 + 或 ~
你的HTML代码是无效的，div 不能作为 span 的子元素。你可以使用HTML验证器检查你的代码的有效性，比如W3C的验证器 validator。
查看有关选择器的文档：documentation
#image_hov:hover ~ #image_rot {
animation: rotateAnimation 2s linear infinite;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<h1 id="image_hov">asdasd</h1>
<h1 id="image_rot">asdasd</h1>
英文:
In your code I don't see the rotation animation, to use CSS animation, you must first specify some keyframes for the animation.
Also you don't use the right selector, you should use + or ~
Your HTML code is not valid, div not allowed as child of span. You can check your code validation with a HTML validator, like W3C`s validator
validator
Check the documentation about selectors: documentation
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#image_hov:hover ~ #image_rot {
animation: rotateAnimation 2s linear infinite;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<!-- language: lang-html -->
<h1 id="image_hov">asdasd</h1>
<h1 id="image_rot">asdasd</h1>
<!-- end snippet -->
答案3
得分: 0
你的HTML结构不正确。要实现你想要的效果，你需要将CSS动画指向图像悬停选择器：
.image {
border-radius: 50%;
}
.image:hover {
animation: rotateImg 1.5s linear infinite;
}
@keyframes rotateImg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<img class="image" src="https://via.placeholder.com/200x200" alt="image_hover">
<img class="image" src="https://via.placeholder.com/200x200" alt="image_rotate">
英文:
Your HTML structure is not correct. To achieve what you want you need to point a CSS animation to the image hover selector:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.image{
border-radius: 50%;
}
.image:hover {
animation: rotateImg 1.5s linear infinite;
}
@keyframes rotateImg {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!-- language: lang-html -->
<img class="image" src="https://via.placeholder.com/200x200" alt="image_hover">
<img class="image" src="https://via.placeholder.com/200x200" alt="image_rotate">
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论