css中如何设置让鼠标经过文字左侧显示图片

在css当中如何写让一个鼠标经过显示图标的应用见过的不多，但是也有人要求这样写，既然有人要求这样写了，我们就试试这种结果的写法。

操作方法

  • 01

    首先我们先写内容，我们想要的是，一行文字，下面是一个横线。我们先把内容写出来。具体代码为，

  • 02

    看到了代码，我们用可视化看下结果，只有经常练习，经常看结果才能有更深的领悟

  • 03

    然后我们就加一些样式了，也就是我们常说的css，也就是层叠样式表，叫法是不是比较高端。 <style> .l-title{ width:120px; height:30px; line-height:30px;list-style:none;text-decoration:none;} .l-title .tubiao{display:none; line-height:30px; margin: 0 10px;} .l-title:hover .tubiao{display:inline-block;} a{ text-decoration:none; list-style:none; color:#000; } </style>

  • 04

    这时我们要修改一些内容了，使其和样式进行结合。代码为： <body> <li class="l-title" ><span class="tubiao"><img src="前端代码收集/未标题-4.png"</span><a href="#">公司简介</a></li> <img src="前端代码收集/未标题-3.png" /> <li class="l-title" ><span class="tubiao"><img src="前端代码收集/未标题-4.png"</span><a href="#">公司简介</a></li> <img src="前端代码收集/未标题-3.png" /> <li class="l-title" ><span class="tubiao"><img src="前端代码收集/未标题-4.png"</span><a href="#">公司简介</a></li> <img src="前端代码收集/未标题-3.png" /> <li class="l-title" ><span class="tubiao"><img src="前端代码收集/未标题-4.png"</span><a href="#">公司简介</a></li><img src="前端代码收集/未标题-3.png" /> </body>

  • 05

    这时我们看下最终的结果，我们截图看下，是不是有点达到结果了。

  • 06

    这里我们找下两个重要的知识点，第一个display：none，我们找下资料

  • 07

    最后说明的是要多总结经验，祝大家每天都进步。

赞 (0)

相关推荐

  • win10系统电脑中如何设置才能在键入文字时显示文本建议

    win10系统电脑中如何设置才能在键入文字时显示文本建议

    在win10系统电脑中,如果想要在键入文字的时候,系统能够显示一些文本建议的话,应如何操作呢?接下来就由小编来告诉大家.具体如下:1. 第一步,打开电脑后,点击左下角的开始图标.2. 第二步,在弹出的 ...

  • 在笔记本电脑中怎么设置连接鼠标后将触摸板禁用

    在笔记本电脑中怎么设置连接鼠标后将触摸板禁用

    今天给大家介绍一下在笔记本电脑中怎么设置连接鼠标后将触摸板禁用的具体操作步骤.1.打开Windows设置1. 方法1:打开电脑,进入桌面,在左下角的开始处,右键,在打开的菜单中,选择设置选项,进入Wi ...

  • Win10电脑的任务栏中如何设置仅显示文件夹名称不显示路径

    Win10电脑的任务栏中如何设置仅显示文件夹名称不显示路径

    我们在使用win10电脑的时候,打开文件后,在任务栏下会显示该文件的具体路径,不希望显示路径该怎么操作呢?今天就跟大家介绍一下Win10电脑的任务栏中如何设置仅显示文件夹名称不显示路径的具体操作步骤. ...

  • Excel表格中怎样设置使打印时首页不显示页码

    当需要打印的Excel表格有多页,并且第一页作为封面不需要设置页码时,该怎么设置,下面小编就来介绍在Excel表格中怎样设置使打印时首页不显示页码 操作方法 01 下面是示例表格(如图): 02 点击 ...

  • Excel表格中怎样设置使日期和星期同时显示

    Excel表格中怎样设置使日期和星期同时显示呢?下面小编来教大家. 操作方法 01 首先,我们打开我们电脑上面的excel,然后我们点击其中一个单元格中输入一个日期: 02 之后我们右击这个单元格,弹 ...

  • iPhone苹果手机中如何设置朗读屏幕上文字

    iPhone苹果手机中如何设置朗读屏幕上文字

    苹果手机是一款为广大消费者所喜爱的手机品牌,它颜值高,性能高,是值得选购的手机.很多用户不知道怎么设置朗读屏幕上文字,小编今天就来为您解答这个问题.具体如下:1. 第一步,请大家在自己的手机中找到[设 ...

  • word软件中怎么设置快速把文档内容转换为图片格式

    word软件中怎么设置快速把文档内容转换为图片格式

    word是我们常用的一款数据处理软件,深受大家的欢迎,是我们学习办公的助手,有的朋友想知道怎么设置快速把文档内容转换为图片格式,小编为大家解答这个问题.具体如下:1. 首先,请大家在自己的电脑中找到[ ...

  • PPT中如何设置背景为颜色很淡的图片？

    今天介绍PPT背景设置为带有一定透明度的图片的方法. 操作方法 01 在PPT中,点击"设计"中的"设置背景格式",如下图所示: 02 选择"填充&q ...

  • AndroidStudio中怎么设置xml与预览同时显示?

    Android Studio做程序开发的时候,为了看程序运行结果和修改错误的地方,经常需要修改xml后就切换到预览去查看效果.经常切换很烦,想要同时显示xml与预览界面,下面我们就来看看详细的教程. ...