Question

所以我希望能够有一个链接，当它悬停时，显示图像.. 到目前为止，我只找到了教程，以便在图像悬停时进行更改。

我该怎么办呢？顺便说一句：我是HTML初学者。

谢谢！

Answer 1

使用adjacent sibling selector和display属性。

＆＃13;

apply(mat,2,sort)

＆＃13;

img {
  display: none;
}
a:hover + img {
  display: block;
}

＆＃13;

Answer 2

终身jQuery。

$('.link').mouseover(function() {
  $('.dog').show();
}).mouseleave(function() {
  $('.dog').hide();
})

@import url('https://fonts.googleapis.com/css?family=Raleway');
 .link {
  height: 40px;
  width: 200px;
  border: 1px solid black;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 10px;
}
a {
  text-decoration: none;
  color: black;
  font-size: 30px;
  font-family: Raleway;
}
.dog {
  background: url('https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg');
  height: 150px;
  width: 150px;
  background-size: cover;
  display: none;
}

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

Answer 3

确实有几种方法可以达到你想要的效果。可能如果你是html和css的初学者，最适合你的是使用 zer00ne 片段。 Hovever，如果你想深入挖掘，我也有以下解决方案：

你可以在这里测试一下 https://jsbin.com/barixeqigi/17/edit?html,css,js,output

HTML

<a href="#" title="super eye" alt="super eye">
  hover
</a>

CSS

a {
  position:relative;
}
a:after {
  content:'';
  display:block;
  width: 200px;
  height: 200px;
  opacity:0;
  background: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg') no-repeat center;
  background-size: cover;
  border-radius:50%;
  position:absolute:
  right:0px;
  top:0px;
    -webkit-transition: all 3s;
    transition: all 3s;
}
a:hover:after {
  opacity: 100;
}

悬停链接时的图像[HTML + CSS]

3 个答案: