悬停时将文本 link 转换为图像

Question

我的网站有三个 link 文本。

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

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

但我不知道如何让每个 link 的悬停图像都不同。

   <!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;

  }

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

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

Answer 3

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

悬停时将文本 link 转换为图像

Converting a text link into an image on hover

html

css

hyperlink

hover