正文 

当前位置： 首页 > 问答 >

CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接

     2023-05-08     58

关键词：

【中文标题】CSS 导航：当鼠标悬停在图标上时，图标应替换为文本链接【英文标题】：CSS Navigation: When hovering over icon, icon should be replaced with text link 【发布时间】：2013-05-19 14:17:06 【问题描述】：

我的导航栏中有这样的图标 (http://d.pr/i/NP2T)。当我将鼠标悬停在一个图标上时，我希望该图标消失并显示该列表项的链接文本 (http://d.pr/i/Vd7i)。

这是我的 HTML：

<div id="npnav">
  <ul>
    <li class="current music"><a href="#">Music</a></li>
    <li class="art"><a href="#">Art</a></li>
    <li class="goods"><a href="#">Goods</a>/li>
    <li class="blog"><a href="#">Blog</a></li>
  </ul>
</div>

这是我的 CSS：

#npnav ul 
list-style:none;
padding-top:15px;


#npnav li 
display:inline-block;
padding:10px;
text-decoration:none;
font-weight:bold;
max-width:60px;
max-height:60px;


#npnav li a 
visibility: hidden;


#npnav li a:hover 
visibility: visible;



li.music background:url('/images/headphone_icon.png') center center no-repeat; 
li.music:hover background:none;
li.art background:url(img/nav-aboutHover.gif) center center no-repeat;
li.art:hover background:none;
li.goods background:url('/images/anchor_icon.png') center center no-repeat;
li.goods:hover background:none;
li.blog:hover background:url('/images/blog_icon.png') center center no-repeat;
li.blog:hover background:none;

如果能提供任何帮助，我将不胜感激，因为我找不到任何使用文本进行悬停替换的教程。谢谢。

【问题讨论】：

【参考方案1】：

鉴于此 HTML：

<div id="npnav">
  <ul>
    <li class="current music"><a href="#">Music</a></li>
    <li class="art"><a href="#">Art</a></li>
    <li class="goods"><a href="#">Goods</a>/li>
    <li class="blog"><a href="#">Blog</a></li>
  </ul>
</div>

假设图标是li 的背景图片，你可以有这个CSS：

.current.music  background-image: url(someImageUrl); 
.art  background-image: url(someImageUrl); 
/* etc */

#npnav li a 
    display: none;


#npnav li:hover 
    background-image: none;


#npnav li:hover a 
    display: inline;

【讨论】：

谢谢先生。我不得不将背景图像更改为不同类的背景，但很容易修复。【参考方案2】：

一种选择是在每个&lt;a&gt; 中添加一个额外的跨度，为其提供所需的背景图像，并将其绝对定位在链接文本上（链接设置为位置：相对）。悬停时，将 span 的位置设置为向左移动以将其移出屏幕。

【讨论】：

【参考方案3】：

尝试将您的 CSS 修改为这样的内容 -

#npnav ul 
    list-style:none;
    padding-top:15px;


#npnav li 
    display:inline-block;
    padding:10px;
    text-decoration:none;
    font-weight:bold;
    width:60px;
    height:60px;


#npnav li a 
    display:block;/*Ensure link covers the full space of the li */
    text-indent: -9000px; /*hide text away to the left */
    line-height:60px;


#npnav li a:hover 
    text-indent: 0;/* Display the text on mouse over */



li.music background:url('/images/headphone_icon.png') center center no-repeat; 
li.music:hover background:none;
li.art background:url(img/nav-aboutHover.gif) center center no-repeat;
li.art:hover background:none;
li.goods background:url('/images/anchor_icon.png') center center no-repeat;
li.goods:hover background:none;
li.blog:hover background:url('/images/blog_icon.png') center center no-repeat;
li.blog:hover background:none;

【讨论】：

使用 jQuery 将鼠标悬停在相邻文本上时更改图标的颜色

】使用jQuery将鼠标悬停在相邻文本上时更改图标的颜色【英文标题】：ChangeColorofIconWhenHoveringOverAdjacentTextWithjQuery【发布时间】：2021-05-0115:09:40【问题描述】：我见过thisarticle，但我想用JavaScript更改图标的颜色。尝试编写一个函... 查看详情

当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框

】当我使用jquery将鼠标悬停在图标上时如何显示一个简单的文本框【英文标题】：HowtoshowasimpletextboxwhenIhoveroveraniconusingjquery【发布时间】：2012-07-3116:08:19【问题描述】：我在html中有一个输入字段，该字段旁边有一个帮助图标(?)... 查看详情

悬停在下拉菜单上时保持主导航项悬停 CSS

】悬停在下拉菜单上时保持主导航项悬停CSS【英文标题】：KeepmainnavitemhoverCSSwhenhoveringoverdropdown【发布时间】：2018-06-2903:29:42【问题描述】：我正在使用Bootstrap4，并创建了一个具有大下拉菜单的导航，使用animate.css用于下拉CSS动... 查看详情

当鼠标悬停在它后面的东西上时 CSS 菜单关闭

...发布时间】：2012-10-1000:37:47【问题描述】：我有一个纯CSS导航菜单，其下拉部分基于一些自动菜单创建工具并经过大量编辑。以前下拉菜单是一列，但现在，随着页面数量的增加，它需要多列才能保持整洁。现在的问题是下拉菜... 查看详情

如何在内部 div 悬停时从外部 div 中删除图标？

...落。当悬停在内部div上时，图标框会显示在两个div中。将鼠标悬停在内部div上时， 查看详情

如何显示图标可以用光标悬停

...图标，带有一个onclick作为按钮。一切正常，但是当我将鼠标悬停在图标上时，我的鼠标不会从指针变为手指。我怎样才能实现这种行为？这是简单的图标实现：<FontAwesomeIconclassName=\'text-white\'icon=f 查看详情

当鼠标悬停在没有css的标题上时，如何使缩略图消失？

】当鼠标悬停在没有css的标题上时，如何使缩略图消失？【英文标题】：howcanImakethumbnailimagedisappearwhenthemousehoversoverthetitlewithoutcss?【发布时间】：2013-09-2510:07:08【问题描述】：当我将鼠标悬停在图片的div上时，我有一个简单的jQu... 查看详情

JQuery - 悬停时使图标变大

...间】：2016-01-1623:33:33【问题描述】：我有一个带有图标的导航栏，每个图标下都有一些文本（如主页、联系人、ecc..）。如果我浏览文本，我希望图标变得更大。现在我只能在鼠标移到图标上时才能做到这一点。这是我的导航栏... 查看详情

悬停时显示“关闭”图标

...45【问题描述】：我有一个新闻源，它显然是由.当用户将鼠标悬停在每个项目上时，背景会突出显示。我还想在每个项目的右上角有一个小“x”，仅在悬停时显示。这个“x”将是删除该帖子的删除按钮。现在我只有一些基本的h... 查看详情

在按钮悬停时更改字形图标的颜色

...描述】：我有一个按钮，上面叠加了信息glyphicon。当我将鼠标悬停在按钮（不是字形图标）上时，如何使glyphicon的颜色发生变化？我需要这样做，因为按钮在悬停时也会改变颜色。CSS和HTML.glyphiconposition:absolute;right:5 查看详情

消失的系统托盘图标

...我的线程和一个系统托盘图标。图标显示，但是每当我将鼠标悬停在图标上时，它就会消失（应用程序仍在运行），即使我单击按钮显示所有隐藏的图标，它也不会显示。但是，如果我不尝试将鼠标悬停在它上面，它 查看详情

如何在颤动的 ReorderableListView 图标上添加颜色变化？

...述】：我的应用中有这个ReorderableListView，我希望当我将鼠标悬停在左侧的复选圆圈图标上时，它们会改变颜色,现在当我将鼠标悬停在它上面时，什么也没有发生， 查看详情

悬停时可折叠图标/内容颜色更改

】悬停时可折叠图标/内容颜色更改【英文标题】：CollapsibleIcon/ContentColorChangeonHover【发布时间】：2021-11-2311:22:31【问题描述】：我正在处理“可折叠”内容（常见问题解答下拉菜单）。在预先单击的“按钮”上，我有一个“加号... 查看详情

悬停、鼠标悬停和鼠标移出

】悬停、鼠标悬停和鼠标移出【英文标题】：Hover,mouseoverandmouseout【发布时间】：2011-05-2616:33:45【问题描述】：我正在学习和使用jQuery，并希望为某些元素显示一个删除图标。我有一个外部主div，其中包含元素的包装器数量。在... 查看详情

如何实现鼠标放在图片上显示一个播放图标？

...详细的想法是：类似音悦台的首页那些视频图片，当你的鼠标指针落在某张图片上的时候，就会出现一个播放的图标。如何才可以实现？！要什么代码？详细的步骤是怎样的？！谢谢！看图片，当鼠标滑过这个图片的时候，会出... 查看详情

当鼠标悬停（悬停）在对象上时，鼠标光标应该改变（three.js）

】当鼠标悬停（悬停）在对象上时，鼠标光标应该改变（three.js）【英文标题】：Whenmouseover(hover)onobjectthemousecursorshouldchange(three.js)【发布时间】：2017-08-1411:45:47【问题描述】：我在场景中添加了一个球体和平面几何体，当单击平... 查看详情

当鼠标悬停在另一个 Div 上时为一个 Div 设置动画

】当鼠标悬停在另一个Div上时为一个Div设置动画【英文标题】：AnimateoneDivwhenthemousehoversoveranother【发布时间】：2012-01-1023:38:43【问题描述】：当鼠标悬停在页面其他地方的另一个div标签上时，我希望为一个div设置动画。举个例子... 查看详情

仅使用 CSS，将鼠标悬停在另一个元素上时显示 div

】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在&lt;a&gt;元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情