利用css设置一个下拉菜单
.a {
position: relative; //position绝对位置 relative 对象不可层叠
display: inline-block; //行内元素可以设置宽度和高度地块元素的属性
}
.b {
display: none;
position: absolute; //absolute是绝对定位，relative是相对定位
background-color: #f9f9f9;//颜色
min-width: 160px;//最小宽度
padding: 12px 16px;//内边距
}
.a:hover .b { //hover悬停事件 就是鼠标在这个上会变样子
display: block; //会变成块级元素 不会在一行
}
html
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<div class="a">
<span>鼠标移动到我这！</span>
<div class="b">
<p>高帆</p>
<p>[email protected]</p>
</div>
</div>
span 没有固定的格式 他是一个行内元素
:contains 选择器可以选取包含指定字符串的元素
$("p:contains(is)")选所有带is的p元素
$(document).ready(function(){
$("p:contains(X)").css("background-color","black");
});
<body>
<h1> My Homepage</h1>
<p class="intro">My name is Gaofan</p>
<p>My best friend is XX</p>
</body>
它会选择p标签带有X的元素给他设为黑色
可以用jquery animate方法 做一个简单的动画效果
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
<body>
<button>开始动画</button>
<div class="g">l</div>
css
.g{
background:black;
height:100px
width:100px;
position:absolute;
}
这个DIV块会到 居左250px时停下来