js 鼠标悬浮时出现下拉框的效果代码
分享下js实现的鼠标悬浮时产生的下拉框效果。
先来看一个基础示例，如下：
<html> <head> <meta type-equiv="Content-Type" content="text/html"> <meta charset="utf-8″> <title>鼠标悬浮 下拉框-www.jbxue.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.jbxue.com">鼠标放上来看看，有什么惊喜哦！</a> </body> </html>
代码说明：
这是定义一个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.jbxue.com–> <meta http-equiv="content-type" content="text/html"> <meta charset="utf-8″> <title>下拉框的制作</title> </head><body> </body> </html>
您可能感兴趣的文章：
js 鼠标悬浮时出现下拉框的效果代码
JS右下角悬浮广告代码的简单示例
JS悬浮移动窗口(悬浮广告)的特效代码
js 固定悬浮效果的代码分享
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
鼠标悬停tip效果如何用css实现？
js实现鼠标滑到图片上则产生放大浮出的效果
JQuery实现鼠标滑过显示导航下拉列表
js实现可关闭的悬浮层的代码
使用jquery hover事件实现表格的隔行换色功能示例