用:hover伪类设置导航菜单背景图片的感悟

最新推荐文章于 2021-08-19 19:16:38 发布

JrainL

最新推荐文章于 2021-08-19 19:16:38 发布

阅读量929

点赞数

文章标签： css html class

本文链接：https://blog.csdn.net/u011268586/article/details/45701333

版权

本文讲述了作者在前端学习中尝试仅使用CSS的:hover伪类实现导航菜单背景图片显示的过程。在实践中遇到的问题主要是背景图片未正确显示在li元素上，经过学习和大神指导，了解到块级元素、行内元素以及选择器的区别，特别是子元素选择器（>）与后代选择器的区别，最终解决了问题。文章强调了基础知识的重要性以及深入理解CSS选择器的必要性。

摘要由CSDN通过智能技术生成

学习前端技术有一段时间了，对于各种知识点都过了一遍，在以为自己已经具备基本的前端技术时，有幸听了一次课程，讲述如何利用PS的切图配合DIV+CSS布局。

在完成课程内容以后，就想要测试一下自己知识的掌握程度，尝试着仅仅利用CSS的:hover伪类来实现导航菜单那的滑过显示背景的功能。但是在具体的实现过程中，出现了很多问题。

首先是现成的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*头部设置*/
*{margin:0; padding:0;}
body{background:url(images/bg.png) repeat-x;}
.head{ width:921px; height:102px; background:url(images/head.png); margin:0 auto;}
.head .logo{display:block; float:left; width:239px; height:102px}
.contact a{text-decoration:none; color:#FFF; font-size:12px}
.contact{float:right; padding:0; margin-top:35px; margin-right:14px;}


/*导航菜单*/
nav{background:url(images/nav.png) no-repeat; width:919px; height:34px; margin:0 auto;}
.nav ul li{list-style:none;text-align:center; line-height:34px; float:left;}
.nav ul li a{t