关键词：
【中文标题】HTML/CSS - 将鼠标悬停在照片上时显示链接【英文标题】：HTML/CSS - Display the link while hovering over a photo 【发布时间】：2020-12-04 16:15:49 【问题描述】：我希望在将鼠标悬停在图像上时显示我的链接。我编写代码的方式仅在我将鼠标悬停在链接本身（包含在图像 div 中）时才显示链接。任何想法我应该如何继续？
.image-text-wrapper
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
font-size: 1.5em;
.image-text-wrapper .xx
transition: 1s;
font-weight: 600;
margin: 20px;
.image-text-wrapper .xx a
color: transparent !important;
.image-text-wrapper a:hover
color: lightseagreen !important;
text-decoration: none;
<div class="portfolio-img-background" style="background-image:url()">
<div class="xx">
<a href="#">
Text
</a>
</div>
</div>【问题讨论】：
所以悬停在外面？.portfolio-img-background:hover
.portfolio-img-background:hover a ..... add style here.. 试试这个..
【参考方案1】：
这是一个仅使用 CSS 的解决方案
#image
width:200px;
height:200px;
background:black;
display:flex;
align-items:center;
justify-content: center;
#link
display:none;
#image:hover > #link
display:block;
<div id="image" class="portfolio-img-background" style="background-image:url()">
<div class="xx" id="link">
<a href="#">
Hi!, im a link
</a>
</div>
</div>【讨论】：
【参考方案2】：可以稍微修改代码底部的这个 CSS 类以使其正常工作。
.image-text-wrapper:hover a
color: lightseagreen !important;
text-decoration: none;
【讨论】：
将鼠标悬停在 iframe 上时如何显示文本
】将鼠标悬停在iframe上时如何显示文本【英文标题】：Howtodisplaytextwhenhoveroveraniframe【发布时间】：2022-01-2110:53:15【问题描述】：我是新来的，首先要问一个特殊的问题：当用鼠标悬停在iframe上时，应该会出现一个带有文本的透... 查看详情
当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像
】当用户使用JQuery将鼠标悬停在链接上时如何显示图像【英文标题】：HowdoIdisplayanimagewhenauserhoversoveralinkusingJQuery【发布时间】：2011-05-2019:38:28【问题描述】：我有一份产品清单。<ul><li><ahref="chair.php">CHAIR</a></... 查看详情
当我将鼠标悬停在链接上时希望切换图像
】当我将鼠标悬停在链接上时希望切换图像【英文标题】：LookingtoswitchimagewhenIhoveroveralink【发布时间】：2021-03-0409:20:46【问题描述】：我一直在努力解决这个问题，我一直在寻找其他类似的问题，但还没有找到我的问题的答案。... 查看详情
将鼠标悬停在href上时如何显示文本
】将鼠标悬停在href上时如何显示文本【英文标题】：Howtomaketextappearwhenhoveroverahref【发布时间】：2015-06-0615:29:41【问题描述】：如何让文本显示在链接下？<divclass="login"><ahref="">Login<p>Accessyourprofilehere</p></a>&l... 查看详情
将鼠标悬停在模式链接上时隐藏浏览器状态栏上的链接
】将鼠标悬停在模式链接上时隐藏浏览器状态栏上的链接【英文标题】：Hidinglinksonbrowser\'sstatusbarwhenyoumouseoveronlinksformodals【发布时间】：2020-12-2614:45:08【问题描述】：我正在尝试禁用雕像栏中的鼠标高亮显示。我已经写了这段JS... 查看详情
使用css将鼠标悬停在按钮上时如何更改站点背景图像？
】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情
悬停在链接上时如何淡入内容？
...ngoveralink?【发布时间】：2011-07-0714:17:03【问题描述】：当鼠标悬停在链接上时，我正在尝试使内容淡入或出现在我的博客上。例如，在我的博客http://www.ricardopomalaza.com/上，如果有人将鼠标悬停在“主页”或“关于”等页面链接... 查看详情
HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值
】HTML/CSS/Javascript-将鼠标悬停在不同的单元格上时更改一个表格单元格的值【英文标题】：HTML/CSS/Javascript-Changingonetablecellvalue,whenhoveringoveradifferentcell【发布时间】：2013-03-0620:11:43【问题描述】：我实际上没有任何与此相关的代码... 查看详情
html/css：鼠标悬停时通过链接增加字体大小的位置移动
】html/css：鼠标悬停时通过链接增加字体大小的位置移动【英文标题】：html/css:Positionshiftingwithlinkthatincreasefontsizewhenhoveringmouse【发布时间】：2012-09-1412:49:51【问题描述】：我想在我的网页中创建一个html/css菜单，其中包含四个链... 查看详情
将鼠标悬停在 ASP.NET 按钮上时显示注释
】将鼠标悬停在ASP.NET按钮上时显示注释【英文标题】：DisplaynoteswhenhoveringoverASP.NETbuttons【发布时间】：2012-10-0602:37:11【问题描述】：我的页面上有许多按钮，我希望在其旁边显示一些注释，说明当它们悬停在任何特定按钮上时... 查看详情
将鼠标悬停在链接 Vanilla JS 上时更改 div 的背景
】将鼠标悬停在链接VanillaJS上时更改div的背景【英文标题】：ChangingbackgroundofadivwhenhoveredoveralinkVanillaJS【发布时间】：2020-08-0702:42:57【问题描述】：当我将鼠标悬停在页面上的链接上时，我希望更改一类名为“grid-light”的div的背... 查看详情
CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接
】CSS导航：当鼠标悬停在图标上时，图标应替换为文本链接【英文标题】：CSSNavigation:Whenhoveringovericon,iconshouldbereplacedwithtextlink【发布时间】：2013-05-1914:17:06【问题描述】：我的导航栏中有这样的图标(http://d.pr/i/NP2T)。当我将鼠标... 查看详情
将鼠标悬停在标题列数据表上时显示工具提示
】将鼠标悬停在标题列数据表上时显示工具提示【英文标题】：ShowTooltipwhenmouseovertheheadercolumndataTable【发布时间】：2014-03-0910:46:08【问题描述】：当鼠标悬停在表头上时如何显示动态表p:dataTable表头的工具提示以显示表头列的整... 查看详情
将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]
】将鼠标悬停在图片上时如何在tumblr上显示标签？[关闭]【英文标题】：Howtoshowtagsontumblrwhenyouhoveroverapicture?[closed]【发布时间】：2013-05-0904:51:34【问题描述】：我得到了这个新主题(http://soeststhemes.tumblr.com/casual)，但不幸的是它没... 查看详情
将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发
】将鼠标悬停在图像上以显示按钮，并且在悬停在实际按钮上时不触发【英文标题】：Hoveroverimagetoshowbuttonsanddon\'ttriggerwhenhoveringoveractualbuttons【发布时间】：2011-04-2604:33:55【问题描述】：我试图让按钮在悬停在图像上时出现。以... 查看详情
将鼠标悬停在 X 上时，如何仅在单个列表中显示 X？
】将鼠标悬停在X上时，如何仅在单个列表中显示X？【英文标题】：HowcanIdisplaytheXonlyinsinglelistwhenIhoveronit?【发布时间】：2021-11-2315:51:28【问题描述】：当我将鼠标悬停在单个列表中时，我遇到了问题。当我悬停它时，我只想在一... 查看详情
将鼠标悬停在列表上时更改列表中每个链接的颜色
】将鼠标悬停在列表上时更改列表中每个链接的颜色【英文标题】：changethecolorofaeverylinkinalistwhenhoveringoverone【发布时间】：2012-02-2214:27:22【问题描述】：这是一个示例列表：<ul><li><ahref="#">Link1</a></li><li&g... 查看详情
通过 CSS 将鼠标悬停在父元素上时显示 :after
】通过CSS将鼠标悬停在父元素上时显示:after【英文标题】：Show:afterwhenhoveringovertheparentelementviaCSS【发布时间】：2013-03-0711:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relativ... 查看详情