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

 时间:2026-02-15 10:52:50

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

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

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

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

3、然后我们就加一些样式了,也就是我们常说的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>

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

4、这时我们要修改一些内容了,使其和样式进行结合。代码为:

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

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

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

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

6、这里我们找下两个重要的知识点,第一个display:none,我们找下资料

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

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

  • 《Dreamweaver 8网页设计》:[21]图片设定
  • DW怎样开启使用速记下的列表样式属性#校园分享#
  • 如何用dreamweaver制作网页
  • Dw怎么关闭允许多个连续的空格
  • div+css网页布局有哪些缺陷的缺陷
  • 热门搜索
    手抄报a4版面设计图 成长故事手抄报 善行历手抄报图片 关于孝心的手抄报 廉洁手抄报内容 三年级手抄报端午节一等奖 手抄报的装饰花边 建队日手抄报 元旦手抄报的内容 关于艺术的手抄报