hover

最新推荐文章于 2024-09-20 09:21:03 发布

wtcsy

最新推荐文章于 2024-09-20 09:21:03 发布

阅读量1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wtcsy/article/details/7756263

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个效果

就是鼠标放上去显示一个块的边框

看上去很简单

a{ display:inline-block; padding:2px 10px;}
a:hover{ border:1px solid #000; border-bottom:0;}

事实上做出来是会抖动的因为加了边框之后 a元素的大小变化了高度变大了1px 宽度变化了2px 所以文字就移位了。所以没那么简单了

所以当hover的时候要保持之前的宽度不变就不会产生抖动

可以这样写

a{ display:inline-block; padding:2px 10px;}
a:hover{ border:1px solid #000; border-bottom:0;padding:1px 9px;}

写了一些例子

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