Jquery 点击鼠标经过离开背景样式变化

列表页点击、鼠标经过离开背景变化

    <script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $("table tr").click(function () { $(this).addClass("aliveTrClick").siblings().removeClass("aliveTrClick"); })
        .mouseover(function () { $(this).addClass("aliveTr"); }).mouseleave(function () { $(this).removeClass("aliveTr"); });
        });
    </script>
    <style type="text/css">.aliveTr{ background:#DfE7D0;} .aliveTrClick{ background:#D0E7D0;}</style>

<table width="80%" border="1">
    <tr>
        <th>生日算命-招堂运</th>
        <th>称骨算命</th>
        <th>姓名测试</th>
        <th>.net域名的数量</th>
    </tr>
    <tr>
        <td>2003年</td>
        <td>1000</td>
        <td>2000</td>
        <td>3000</td>
    </tr>
    <tr>
        <td>2004年</td>
        <td>4000</td>
        <td>5000</td>
        <td>6000</td>
    </tr>
    <tr>
        <td>2005年</td>
        <td>7000</td>
        <td>8000</td>
        <td>9000</td>
    </tr>
</table>
时间: 2024-10-04 09:22:44

Jquery 点击鼠标经过离开背景样式变化的相关文章

鼠标经过时背景颜色变化

<style type="text/css">#coolmenu{border: 1px solid black;border-bottom-width: 0;width: 170px;background-color: #E6E6E6;}* html #coolmenu{width: 164px;}#coolmenu a{font: bold 13px Verdana;padding: 2px;padding-left: 4px;display: block;width:

jQuery鼠标进入离开css样式修改

// 鼠标进入离开音量 提问 统计样式 $('.vjs-volume-menu-button') .mouseover(function () { $('.tiwen').css({ transition: 'all 0.4s', right: '240px' }) $('.tongji').css({ transition: 'all 0.4s', right: '350px' }) }) .mouseout(function () { $('.tiwen').css({ right: '16

Jquery 点击按钮将其背景图换成另一张,再次点击恢复默认图片

这是Jquery代码: $(function () { $("#h1").toggle(function () { $("#h1").css("background-image", "url('./20110528073501b54e6.jpg')"); }, function () { $("#h1").css("background-image", "url('./2011

当一个按钮点击不了时,鼠标可以自定义的样式

现在很多网站流行做法,当一个按钮点击不了的时候,会给用户一个略显优雅的提示,即鼠标手势的样式发生变化.简单的样式变化. 图方便就利用下jquery...主要就是注意下,cursor值的用法 $('#www').mouseout(function(){ $('body').css('cursor', 'default'); }); $('#www').mouseover(function(){ $('body').css({'cursor':'url("cursor.png"),defa

基于JQuery的获取鼠标进入和离开容器方向的实现

基于JQuery的获取鼠标进入和离开容器方向的实现 做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>判断鼠标从哪个方向进入和离开容器</title&g

android checkBox背景样式及用颜色值实现按钮点击效果

1  使用颜色值(不使用图片)来实现按钮的点击效果: color.xml <color name="head_color">#836FFF</color> <color name="information_title_color">#666666</color> <color name="list_bg_color">#FFF4F4F4</color> <color n

Javascript:DOM事件(监听鼠标点击/释放,鼠标悬停/离开等)

使用Javascript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

jQuery点击tr实现checkbox

标题描述的有点不贴切,但希望大家能够明白,为了更形像的表达,我特意录制了一张GIF动画图片. 我不知道实际开发中有没有用到这种效果,但我个人认为,这种方式更人性化,因为只要点到一行,就可以使CheckBox.checked=true: 不用非得点复选按钮才能实现; 实现的过程有点纠结,试了几次都没成,最后用了一个笨笨的方法,就是点击行的时候,让他的子元素(td)的背景颜色为红色.(因为我用到了光棒效果,如果我点击行(td)的时候,颜色是变了,但鼠标一离开的时候就又变回原来的颜色了) 可能你会问我