一个效果
就是鼠标放上去显示 一个块的边框
看上去很简单
a{ display:inline-block; padding:2px 10px;}
a:hover{ border:1px solid #000; border-bottom:0;}
<a href="#">123</a>
事实上做出来是会抖动的 因为加了边框之后 a元素的大小变化了 高度变大了1px 宽度变化了2px 所以文字就移位了。 所以没那么简单了
所以当hover的时候要保持之前的宽度不变 就不会产生抖动
可以这样写
a{ display:inline-block; padding:2px 10px;}
a:hover{ border:1px solid #000; border-bottom:0;padding:1px 9px;}
<a href="#">asd</a>
写了一些例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>t</title>
<style>
*{margin:0;padding:0;}
a{ color:#666; text-decoration:none;}
ul{ list-style:none;}
.tips{position:relative;}
body{ font-size:12px;}
.warp{ width:960px; margin:30px auto; ;}
.menu{ height:24px;}
.warp .menu .hd{
height:22px; line-height:22px; padding:1px 9px 0; display:inline-block; position: relative; z-index:10; background-color:#FFF;
}
.warp .menu li{float:left; padding:2px 10px;height:22px; line-height:22px; }
.warp .menu .hover a{
padding:0 8px;
border:1px solid #d7d7d7;
border-bottom:0;
}
.warp .menu .hover .bd{display:block}
.warp .menu .bd{padding:5px 10px; border:1px solid #d7d7d7;position:absolute; left:0; top:22px; width:450px;display:none; background-color:#FFF;}
</style>
</head>
<body>
<div class="warp">
<ul class="menu" id="xx">
<li>
<div class="tips">
<a href="#" class="hd">我擦擦擦擦擦</a>
<div class="bd">
<p>你好你好你很好1111</p>
<p>你好你好你很好2222</p>
<p>你好你好你很好3333</p>
<p>你好你好你很好4444</p>
</div>
</div>
</li>
</ul>
<style>
.menu2{ width:300px;}
.menu2 li{ line-height:22px; height:22px; padding-left:15px; border:1px solid #d7d7d7; margin-bottom:-1px; padding-bottom:1px;}
.menu2 li.end{ margin-bottom:0;}
.menu2 li:hover{border:1px solid #f00;margin-bottom:0;padding-bottom:0px;}
.menu2 li.end:hover{border:1px solid #f00;padding-bottom:1px;}
</style>
<br><br><br>
<ul class="menu2">
<li>
<a href="#">你好你好你很好111</a>
</li>
<li>
<a href="#">你好你好你很好111</a>
</li>
<li>
<a href="#">你好你好你很好111</a>
</li>
<li class="end">
<a href="#">你好你好你很好111</a>
</li>
</ul>
<style>
.c3{ width:300px; border:1px solid #CCC;}
.c3 .hd{ background:#EEE; overflow:hidden; zoom:1;padding:5px 10px 0; }
.c3 .hd li{float:left; margin-right:5px;}
.c3 .hd li a{ display:inline-block;height:22px; line-height:22px; padding:1px 9px 0;}
.c3 .hd li.on a{border:1px solid #CCC; border-bottom:0; padding:0 8px; background:#fff;}
.c3 .hd li a:hover{ border:1px solid #CCC; border-bottom:0; padding:0 8px; background:#fff;}
.c3 .bd{ background:#fff; padding:10px;}
</style>
<br><br><br>
<div id="d3" class="c3">
<div class="hd">
<ul>
<li num="0" id="h3" class="on"><a href="#">人族</a></li>
<li num="1"><a href="#">兽族</a></li>
<li num="2"><a href="#">不死族</a></li>
<li num="3"><a href="#">精灵族</a></li>
</ul>
</div>
<div class="bd">
<div id="b3">
<p>11111111111111</p>
<p>11111111111111</p>
<p>11111111111111</p>
</div>
<div style="display:none">
<p>22222222222222</p>
<p>22222222222222</p>
<p>22222222222222</p>
</div>
<div style="display:none">
<p>333333333333333</p>
<p>333333333333333</p>
<p>333333333333333</p>
</div>
<div style="display:none">
<p>4444444444444444</p>
<p>4444444444444444</p>
<p>4444444444444444</p>
</div>
</div>
</div>
<style>
.warp .menu4{ background:#00F;}
.warp .menu4 li{ display:inline-block; *display:inline;zoom:1; padding:2px 8px; margin-right:20px;}
.warp .menu4 li .c{ position:relative;}
.warp .menu4 li .c a{ color:#FFF; height:22px; line-height:22px; display:inline-block; padding:1px 9px 0px; position:relative;}
.warp .menu4 li .c a:hover{ border:1px solid #999; padding:0 8px; border-bottom:0; background:#fff; color:#000; z-index:9}
.warp .menu4 li.on a{border:1px solid #999; padding:0 8px; border-bottom:0; background:#fff; color:#000; z-index:9}
.warp .menu4 li .c .bd{display:none; width:150px; border:1px solid #999; background:#fff; position:absolute; top:22px; left:0; padding:10px;}
.warp .menu4 li.on .bd{display:block;}
</style>
<br><br><br>
<div style="height:400px; background:#FF0">
<ul id="d4" class="menu4">
<li>
<div class="c">
<a href="#">人族</a>
<div class="bd">
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
</div>
</div>
</li>
<li>
<div class="c">
<a href="#">兽族</a>
<div class="bd" style="left:-50px;">
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
</div>
</div>
</li>
<li>
<div class="c">
<a href="#">不死族</a>
<div class="bd" style="left:-90px;">
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
</div>
</div>
</li>
<li>
<div class="c">
<a href="#">精灵族</a>
<div class="bd" style="left:-118px;">
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
<p>很多很多英雄...</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
window.onload = function(){
$("#xx div")
.bind("mouseover",function(){$(this).addClass("hover");})
.bind("mouseout",function(){$(this).removeClass("hover");})
var h3 = $("#h3"),
b3 = $("#b3"),
blocks = $("#d3 .bd div")
$("#d3 .hd li")
.bind("mouseover",function(){
h3.removeClass("on");
$(this).addClass("on");
var num = $(this).attr("num");
b3.hide();
h3 = $(this);
b3 = blocks.eq(num);
b3.show();
});
$("#d4 li")
.bind("mouseover",function(){$(this).addClass("on")})
.bind("mouseout",function(){$(this).removeClass("on")})
}
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
分享到：
相关推荐
主要介绍了解决css中hover做遮盖罩闪动问题的相关知识,需要的朋友可以参考下
鼠标悬停效果 li:hover,div:hover等，是css2及以上版本才添加的，在IE6中只兼容a:hover，要使用li:hover或div：hover，需引用一个文件使其兼容，它就是csshover.htc
这是一个很棒的鼠标悬停（hover）效果。从国外的网站上看到了，转载过来。没有作任何翻译与编辑，大家可以偿试阅读英文教程，加油！ 注意：此悬停效果在IE6中无效 实例预览地址：...
css 中有个奇怪的问题: 在使用 link的时候，要使用如下顺序，否则hover则没有任何效果 a:link a:visited a:hover a:active
QListView Hover 了解Hover的事件触发
有些时候需要用到mouseover和mouseout这两个鼠标事件，但是写js又比较麻烦，还要添加监听事件，所以能用css解决的东西尽量yongcss解决，这样可以提高性能，下面说一下我对:hover 的了解: 之前在学计算机应用的时候，...
a标签不加href属性a标签:hover状态不触发buga标签可点区域不可点击bug a标签不加href属性 个人觉得都不能称之为bug，但还是拿出来说道说道，因为确实有人这么干，查找问题的时候也花费了点时间。请看demo1 图一 图...
代码如下:$(“#showComp tr:not(‘.stlisttitle’)”).hover(function(){ try{if($(“#calendarPanel”).is(“:visible”)) $(“.playerlist”).hide();else{clearTimeout(timMess); $(“.playerlist”).css(“top...