分享下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>
代码说明：
例子，点击时隐藏文本：
<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>