如何将图像居中，使其充当 link 并具有鼠标悬停命令？

Question

所以，在 HTML/CSS 方面，我真的是一个菜鸟，所以我已经道歉了。

因此，我需要做的是将图像居中（这样它也可以在不同的 resolutions/screens 处居中），在鼠标悬停时将图像更改为另一个来源，并使其充当 link到另一个网页。

在 HTML 我有这个：

<a href="url to the webpage">
<img class="Logo" src="Logo.png">
</a>

在 CSS 我有这个：

img.Logo{
position: absolute;
margin: auto;
left: 0; 
right: 0;
top: 0;
bottom: 0;  
}

所以我把它很好地居中并充当 link，但我完全不知道如何让它在鼠标悬停时显示另一个图像。很抱歉，如果之前有人问过这个问题，或者这是一个非常简单的问题，我尝试用谷歌搜索，但 none 给了我一个对我来说足够简单的答案。 :|

Answer 1

如果没有 position: absolute-

，请使用 css

img {
margin: 0 auto;
}

如果你想申请 position: absolute 然后使用这个 css-

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* make sure to add all the vendor prefixes */
}

鼠标悬停效果用这个JS-

document.getElementsByClassName('Logo')[0].onmouseover = function() {
this.src = 'yourAnotherImgUrl';
}

如果你想在鼠标离开时恢复到图像然后使用这个 JS -

document.getElementsByClassName('Logo')[0].onmouseout = function() {
this.src = 'yourOriginalImgUrl';
}

Answer 2

<a href="url to the webpage">
    <img src="Logo.png" onmouseover="this.src='your_other_image'"
      onmouseout="this.src='Logo.png'" />
</a>

使用 JavaScript 您可以在 onmousehover 事件将图像更改为第二张图像之前显示默认图像，然后在 onmouseout 事件被触发时回到原来的状态。

How to center an image, make it act as an link and have an mouseover command?