宝哥软件园

JQuery控制差异的选取实现方法

编辑:宝哥软件园 来源:互联网 时间:2021-09-07

我们设置四个差异当鼠标移动到某一个差异上面的时候背景颜色就会发生变化

那我们应该知道要用到鼠标悬停()和mouseout()前一个是移动到某个位置后面是移开某个位置

还有一个悬停(,)可以替代上面两个方法

1.用鼠标悬停()和mouseout()

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/脚本类型=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/脚本脚本type='text/javascript'$(function(){$('div[id^='div']').mouseover(函数(){ $(this)).css(“”背景色','红色');//$(这个)。css({ '底色' : '红色' });});$('div[id^='div']').mouseout(函数(){ $(此)).css(“”背景色,' # 0FC ');//$(这个)。css({ '背景色: ' # 0FC ' });});});/剧本风格type='text/css'div[id^='div']{width:300px;高度:500 px背景色-: # 0FC;border:1px纯黑;float:left边距-左侧:2 px}/style/head dydiv id=' div 1 '/div div id=' div 2 '/div div id=' div 3 '/div div id=' div 4 '/div/body/html(9500 . 163.com)

2.hover()

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html;charset=utf-8 '/脚本类型=' text/JavaScript ' src=' http : jquery/jquery-1。12 .1 .js '/脚本脚本type='text/javascript'$(function(){$('div[id^='div']').悬停(function(){$(this)).css(“”背景色','蓝色');},function(){$(this).css(“”背景色,' # 0FC ');});});/剧本风格type='text/css'div[id^='div']{width:300px;高度:500 px背景色-: # 0FC;border:1px纯黑;float:left边距-左侧:2 px}/style/head dydiv id=' div 1 '/div id=' div 2 '/div div id=' div 3 '/div div id=' div 4 '/div/body/html(9503 . 163.com)

也可以这么写

$(函数(){ var In=function(){ $(this)).css(“”背景色','红色');}var Out=function(){$(this).css(“”背景色','黄色');}$('p[id^='p']').悬停(入、出);});以上这篇JQuery控制差异的选取实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+