在悬停时将文本链接转换为图像答案

【问题标题】：Converting a text link into an image on hover在悬停时将文本链接转换为图像
【发布时间】：2016-09-10 19:43:17
【问题描述】：

我有一个包含三个文本链接的网站。

我正在努力做到这一点，因此当我将鼠标悬停在文本链接上时，会显示一个特定的图像。

我已经能够将鼠标悬停在文本上并更改其颜色。

但我不知道如何让每个链接悬停在不同的图像上。

   <!DOCTYPE html>
   <head>
   <style>
   /* mouse over link */
   a:hover {
   color: white;
   }
   </style>
   </head>
   <body
   <div class="flex-container">
   <div class="flex-item"><img src="cityscape.png">
   <a href="ArchitectureWork.html">arch</a></div>
   <div class="flex-item"><a href="FineArt.html">fine art</a></div>
   <div class="flex-item"><a href="Doodles.html">doodles</a></div>
   </div>
  </body>


 .flex-container {
   /*display: -webkit-flex;*/
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: aqua;
  align-content: center;
  padding-left: 90px;
  padding-right: 90px;

  }
 .flex-item{
 /*-webkit-flex: 1;*/
 /* I don't get order */
 order: 1;
 flex: 1;
 flex-basis: 20%;
 max-width: 1000px;
 min-width: 100px;
 align-self: center;
 padding-left: 10px;
 padding-right: 10px;
 padding-top: 20px;
 padding-bottom: 20px;

  }

【问题讨论】：

标签： html css hyperlink hover

【解决方案1】：

.flex-item > img       { display: none; }
.flex-item:hover > img { display: inline; }
.flex-item:hover > a   { display: none; }
.flex-container        { display: flex; }

<div class="flex-container">
    <div class="flex-item">
        <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
        <a href="ArchitectureWork.html">arch</a>
    </div>
</div>

【讨论】：

当然可以。只需将img 包装在a 标签中。 jsfiddle.net/efmpL3t8

【解决方案2】：

当img的父div悬停时，您可以只使用CSS来显示img。像这样：

.flex-item img {
  display: none;
}

.flex-item:hover img {
  display: block;
}

.flex-item:hover a {
  color: #FFFFFF;
}

演示：https://jsfiddle.net/xbkrnrhd/1/

或者你可以把 img 放在 a 元素中。

a img {
  display: none;
}

a:hover {
  color: white;
}

a:hover img {
  display: block;
}

【讨论】：

【解决方案3】：

.div-class:hover {
  content:url("https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png");
}

【讨论】：