鼠标滑过，解决ul下 li下a的背景与父级Li不同宽的问题

我们在写导航或者页面有超链接的地方，有一些是需要超链接的背景和Li的宽度一样的。但是，却没有达到这种效果？为什么？

我们做的效果图：如下

期望的效果：如下

出现这样的原因：由于a是个行内元素，它没有宽高这种概念，a的大小全凭内容撑，所以，为了解决这个问题我们给a这标签加一个display:block;样式，这样就可以达到目的。

样式表

还有一个小技巧，我们在给li前面自定义小图标时候，发现图标离文字特别近，有重合的现象，我们这时候，就可以给li加一个内填充，padding-left：20px； 这样就可以让图标和内容有一定的距离。或者给li的下级标签设置一个margin-left:25px；也是一样的效果。

还有:如果小图标不居中，或者在鼠标hover的时候，位置发生了移动，都可以在background后面添加left center。

另外制作导航栏的技巧

时间： 2024-11-03 22:14:27

鼠标滑过，解决ul下 li下a的背景与父级Li不同宽的问题的相关文章

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理.当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考. 1.拖一个动态面板到编辑区: 2.双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态: 3.双击“正常”状态,进入正常状态编辑页面: 4.在动态面

jquery选择div下的ul下的li下的a

使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").children("ul:first").children("li:first").find("a");//div下的第一个ul下的第一个li下的a标签 //可以用下标 $("div#div的id").children("u

JS-事件之鼠标、键盘都能控制的下拉选框效果

<script type="text/javascript"> window.onload=function(e){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'),//as是一个集合 index=-1

联合县城市，采用ajax，而使用ul模拟select下拉

接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){ $("#province ul").toggle(); }) //使用jquery效果展示鼠标放到城市的ul下拉展示 $("#city").hover(function(){ $("#city ul").toggle(); }) //使用jquery效果展示鼠标放到区县的ul下拉展示 $(&quo

省市县级联，使用ajax，并且使用ul模拟select下拉

前台代码 js //使用jquery效果展示鼠标放到省份的ul下拉展示 $("#province").hover(function(){ $("#province ul").toggle(); }) //使用jquery效果展示鼠标放到城市的ul下拉展示 $("#city").hover(function(){ $("#city ul").toggle(); }) //使用jquery效果展示鼠标放到区县的ul下拉展示 $(&

XE6移动开发环境搭建之IOS篇（5）：解决Windows和虚拟机下Mac OSX的共享问题（有图有真相）

XE6移动开发环境搭建之IOS篇(5):解决Windows和虚拟机下Mac OSX的共享问题(有图有真相) 2014-08-20 20:28 网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的内容.傻瓜式的表达来告诉你想要的答案. 在安装XE6 PAServer前,我们先解决Windows和虚拟机下Mac的文件共享问题,由于虚拟机和我们安装的XE6是同一台电脑,所以此问题很好解决.网上相传有很多的共享大法,但是在WIN7这种权限管制得过份的系统下显得相对复杂了,

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3> <ul> <li> html/css从入门到精通 </li> <li> html

解决php 5.4下dedecms登陆后台空白，标题不能为空错误

这两天有人反应新版的php-fpm的php版本为5.4.7对dedecms5.6兼容性不好. dedecms安装完成后会出现登陆后台空白,发布文章时提示"标题不能为空". 1.解决dedecms登陆后台空白错误因为php5.4的版本废除了session_register,所以需要去掉session_register函数 修改:"include/userlogin.class.php",注释掉session_register,修改后如下//@session_regis

解决Xilinx_ISE在Win8下打开崩溃闪退的方法

解决Xilinx_ISE在Win8下打开崩溃闪退的方法 在64位windows8或者8.1上安装xilinx ise之后,加载 licence或者保存文件的时候,ise应用程序就会崩溃,出现闪退的情况. 修复方法: 第一步: 找到xilinx安装文件下的子文件,我的是安装在D盘. [plain] view plaincopy D:\Xilinx\14.4\ISE_DS\ISE\lib\nt64 在这个文件夹中搜索文件 libPortability 会出来两个文件 [plain] view pla