html - 当用户将图像悬停在 css3 中时链接图像

Question

我有一张图片，它本身就是一个链接。我想在用户将鼠标悬停在这张图片上时显示另一个链接(链接的名称)，这将是指向其他页面的链接

---

.我需要知道这个链接如何通过链接边框属性、不透明度、背景颜色、中间对齐等样式在图像上可见。

---

我有很多问题。好心帮忙!我怎样才能做到？？

Answer 1

你可以制作一个 div 并将两个 anchor 放在里面；其中之一带有 display: none。然后，当用户将鼠标悬停在主 div 上时，我们会显示该 anchor 。

.image {
	position: relative;
	float: left;
}

.image a { display: block; }

	.image a.hidden-url {
		display: none;
		position: absolute;

		width: 100%;
		top: 20px;

		background: black;
		color: #fff;
	}

	.image:hover a.hidden-url { display: block; }

<div class="image">
	<a href="http://google.com" target="_blank" class="hidden-url">Go to Google instead</a>
	<a href="http://stackoverflow.com" target="_blank"><img src="http://placehold.it/200x200/?text=StackOverflow" alt=""></a>
</div>