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

Question

所以，就HTML / CSS而言，我真的是一个菜鸟，所以我已经道歉了。

所以，我需要做的是将图像居中（以便它也以不同的分辨率/屏幕为中心），在鼠标悬停时将图像更改为另一个源，并使其充当另一个网页的链接。

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

所以我把它很好地集中在一起并充当链接，但我绝对没有任何想法如何让它在鼠标悬停时显示另一个图像。我很抱歉，如果之前有人问这个问题，或者这是一个非常简单的问题，我试着用谷歌搜索出来，但没有人给我一个对我来说很简单的答案。 ：|

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 <上返回原始图像/ em>事件被触发。