当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js制作的鼠标悬浮时产生的下拉框效果

js制作的鼠标悬浮时产生的下拉框效果

2018年10月18日  | 移动技术网IT编程  | 我要评论

先看个示例，代码如下:

<html><head>
<meta type-equiv="content-type" content="text/html">
<meta charset="utf-8′>
<script type="text/javascript">
jq=jquery.noconflict();
jq=(document).ready(function(){
jq("a").mouver(function(){
jq("a").css("color","#c00′);
});
jq("a').mouseout(function(){
jq("a").css("color","#000000′);
});
</script>
</head><body>
<a href="www.jb51.net">鼠标放在上面看看会发生什么</a>
</body></html>


jq=jquery.noconflict();
这是定义一个js的jquery库名；
jq(document).ready(function(){
/*这是一个关于document对象的函数里面是函数内容*/
})；
jq("a").mouseover()function(){
/*这是定义事件mouseover的内容*/
}。
在看一个实际例子；点击时隐藏文本：

. 代码如下:


<html><head>
<script type="text/javascript">
$(document).ready(function() {
$(".abc .hide").click(function() {
$("this").parents("abc").hide("slow"); }); });
</script>
<stype type="text/css">
p.abc {
background: #e5eec;
padding: 7px;
margin: 0px;
border: solid 1px #c00; }
</stype>
</head><body>
<p class="abc">
<p><button class="abc" type="button">hide<button><br/>
这段文字将被隐藏<br/>
这段文字也将被隐藏
</p></p>
<p class="abc"><p>
<button class="abc" type="button">hide me</button><br/>
这段文字在点击hideme时隐藏<br/>
这段文字同样也会隐藏。
</p></dvi>
</body></html>


功课差不多了，我们言归正传回到主题下拉框才是王道。

代码如下:


<html><head>
<!–author linuxa
blogs: www.jb51.net–>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-8′>
<title>下拉框的制作</title>
</head><body>
</body></html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网