用jQuery toggleClass 实现鼠标移上变色_jquery

按钮移上变色效果

复制代码 代码如下:

<style>
.round-corner-btn {
-moz-border-radius:4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;

width:200px; height:40px; line-height: 40px;
background: green;
display:inline-block;
color:white;
text-align : center;
cursor: pointer;
}

.avatar_size{
font-size:12px;
text-align: center;
margin-top:4px;
}

.btn-hover{
opacity: 0.8;
}
</style>
<div class='round-corner-btn'> 按钮</div>
<script>
$('.round-corner-btn').hover(function(){
$(this).toggleClass('btn-hover', 200);
})
</script>

时间: 2024-10-21 14:32:02

用jQuery toggleClass 实现鼠标移上变色_jquery的相关文章

jquery 提示插件鼠标移上圆角框图片提示

  <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head>  <meta http-equiv="content-type" content="text/html;charset=gb2312"/>  <title>

Jquery实现鼠标移上弹出提示框、移出消失思路及代码_jquery

思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover 复制代码 代码如下: //页面加载完成 $(function () {     var x = 10;     var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标     $(

js图片滚动效果时间可随意设定当鼠标移上去时停止_javascript技巧

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

jquery图片列表鼠标移入微动实现代码

本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

jquery实现图片列表鼠标移入微动_jquery

本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti

鼠标移上链接出现下划线

有些网页的链接,原先没有下划线,你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了.这种效果其实可以用层叠样式表(CSS)来实现,在Dreamweaver中编辑层叠样式表不用编写代码,具体操作方法如下: (1)在快速启动栏中点击层叠样式表按钮(就是把鼠标放上去显示"show css styles"的那个按钮),在弹出的CSS Styles面板上双击(none): (2)此时,可看到弹出的Edit Style Sheet 面板,在该面板上按New按钮: (3)弹出的New St

ASP.NET treeview节点鼠标移上去时背景色变化问题

问题描述 属性设置中HoverStyle="background:#6079d2;color:#ffffff",SelectedStyle="background:#6079d2;color:#ffffff"节点选中时和鼠标移到节点时背景色设置成同样颜色,但实际效果中鼠标移上去的颜色要淡很多,SelectedStyle中#6079d2这个颜色生效了,色彩是对的,但是HoverStyle的颜色始终要淡,达不到我设置的颜色,求高人解答!!!!!!!! 解决方案 解决方案

纯CSS实现的当鼠标移上图片添加阴影效果代码_图象特效

鼠标移上去显示圆滑的阴影

jQuery插件实现表格隔行换色且感应鼠标高亮行变色_jquery

js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }