Question

我有一个链接本身的图像。当用户将鼠标悬停在此图像上时，我想在此图像上显示另一个链接（链接名称），这将是指向其他页面的链接

。我需要知道这个链接在图像上是如何可见的，具有一些样式，如链接边框属性，不透明度，背景颜色，中间对齐..

我遇到了Load的问题。好心的帮助！我该怎么做？

Answer 1

你可以制作一个div并将两个锚放在里面;其中一人有display: none。然后我们在用户悬停在主div上时显示锚点。

.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>

Answer 2

玩得开心。

$('.container').mouseenter(function() {
    $('.link').fadeIn().css('display', 'flex');
  });
  $('.link').mouseleave(function() {
    $('.link').fadeOut();
  });

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background: url(https://s3.graphiq.com/sites/default/files/stories/t2/Golden_Retriever_4677_5288.jpg);
  background-size: cover;
  position: absolute;
}
.link {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-size: cover;
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
}
.link a {
  width: 50x;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
</div>
<div class='link'>
  <a href='www.google.com'>LINK</a>
</div>

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

2 个答案: