用jQuery toggleClass 实现鼠标移上变色

按钮移上变色效果


代码如下:

<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>

赞 (0)

相关推荐

  • jQuery中toggleClass()方法用法实例

    本文实例讲述了jQuery中toggleClass()方法用法.分享给大家供大家参考.具体分析如下: 此方法对添加或移除匹配元素的一个或多个类进行切换. toggleClass()方法检查匹配元素中指定的类.如果不存在则添加类,如果已设置则删除之.这就是所谓的切换效果. 语法结构一: 复制代码 代码如下: $(selector).toggleClass(class,switch) 如果存在(不存在)就删除(添加)一个类. 参数列表: 参数 描述 class 规定添加或删除的类. 如果需要添加多个

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

  • jquery点击改变class并toggle的实现代码

    jquery点击改变class并toggle的实现代码 <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

  • jquery中toggle函数交替使用问题

    html中有几个btn触发toggle函数,想要实现的功能是:点击每个toggle时将其他toggle函数的计数全部清零,试过removedata不起作用,是否有更好的办法呢 给大家一个实例来参考下吧 请参考这个:jsp页面 <li> <label class="labelText">统计类型:</label> <span class="sortBox"> <a href="javascript:;&q

  • jQuery toggle 代替方法

    具体内容如下所示: $('.back_left dt').toggle(function(){ $(this).addClass("selected"); $(this).siblings('dd').slideUp(); },function(){ $(this).removeClass("selected"); $(this).siblings('dd').slideDown(); }); 今天在做一个项目,抄了别人网站上的一代码,发现怎么都无法实现,在我急得不

  • jQuery中hover方法和toggle方法使用指南

    jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 参数:     over (Function) : 鼠标移到元素上要触发的函数.     out (Function): 鼠标移出元素要触发的函数. 复制代码

  • jquery 中toggle的2种用法详解(推荐)

    一.在元素的click事件中绑定两个或两个以上的函数  toggle不像bind需要在后面添加"click"来绑定click触发事件,toggle本身就是click触发的(而且只能click触发), 如下实例: <input id="btntest" type="button" value="点一下我" /> <div>我是动态显示的</div> <script type="

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

    按钮移上变色效果 复制代码 代码如下: <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; tex

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

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

  • 图片与文字半透明效果 鼠标移上不透明

    该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好. 图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(http://files.jb51.net/demoimg/200910/wall.

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

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

    CSS给图片添加阴影 *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(http://files.jb51.net/demoimg/200912/avatar.gif) 0 0 no-repeat;} #profileAv

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

    <%@ 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 实现表格颜色交替变化鼠标移过颜色变化实例

    Jquery 实现表格颜色交替变化,点击选中行,鼠标移过颜色变化效果图如下: 源码(Demo)打包下载 html代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http:/

  • 鼠标移到导航当前位置的LI变色处于选中状态

    鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航. 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>鼠标移到导航上面 当前的LI变色 处于当前的位置</title> <style type="text/css"&g

  • JQuery鼠标移到小图显示大图效果的方法

    本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr

  • jQuery实现鼠标移到某个对象时弹出显示层功能

    本文实例讲述了jQuery实现鼠标移到某个对象时弹出显示层功能.分享给大家供大家参考,具体如下: /** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $("#" + divId); //要浮动在这个元素旁边的层 div.css("position", "absolute");//让这个层可以绝对定位 var

  • asp.net GridView和DataList实现鼠标移到行行变色

    在GridView控件的RowDataBound事件里添加以下代码 if (e.Row.RowType == DataControlRowType.DataRow) { //当鼠标移到行上时更改背景色 e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#EE82EE'"); //当鼠标移开时还原背景色 e.Row.Attribut

随机推荐