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

Posted 2023-05-08

技术标签:

【中文标题】在悬停时将文本链接转换为图像【英文标题】：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;

【问题讨论】：

【参考方案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"   >
        <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");

【讨论】：

以上是关于在悬停时将文本链接转换为图像的主要内容，如果未能解决你的问题，请参考以下文章