js 鼠标悬浮时出现下拉框的效果代码

发布时间:2020-09-01编辑:脚本学堂
本文介绍下,用js实现的鼠标悬浮时出现下拉框的一段代码,效果不错,有需要的朋友参考下。

分享下js实现的鼠标悬浮时产生的下拉框效果。

先来看一个基础示例,如下:

<html>
<head>
<meta type-equiv="Content-Type" content="text/html">
<meta charset="utf-8″>
<title>鼠标悬浮 下拉框-www.jb200.com</title>
<script type="text/javascript">
jq=jquery.noConflict();
jq=(document).ready(function(){
jq("a").mouseover(function(){
jq("a").css("color","#c00″);
});
jq("a').mouseout(function(){
jq("a").css("color","#000000″);
});
</script>
</head>
<body>
<a href="www.jb200.com">鼠标放上来看看,有什么惊喜哦!</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">
div.abc {
background: #e5eec;
padding: 7px;
margin: 0px;
border: solid 1px #c00; }
</stype>
</head><body>
<div class="abc">
<p><button class="abc" type="button">hide<button><br/>
此段文字将被隐藏<br/>
此段文字也将被隐藏
</p></div>
<div class="abc"><p>
<button class="abc" type="button">hide me</button><br/>
此段文字在点击hideme时隐藏<br/>
此段文字同样也会隐藏。
</p></dvi>
</body></html>

主题下拉框:

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