html鼠标悬停事件效果(css中hover的用法)

   日期:2022-02-24     文章发布:文章发布    网络转载:生活号    
核心提示:事件之营造事件 click触发每一个匹配元素的click事件。 //将页面内所有段落点击后隐藏。 $("p").click(function(){$(this).hide();}); mouseover当鼠标指针位于元素上方时,会发生mouseover事件。 //当鼠标指针位于元素上方时时,改变元素的背景色: $("p").mouseover(function(){ $("p").css("bac...
移动站源标题:http://mip.818114.com/news/item-177956.html

事件之营造事件

click触发每一个匹配元素的click事件。

//将页面内所有段落点击后隐藏。

$(“p”).click( function () { $(this).hide(); });

mouseover当鼠标指针位于元素上方时,会发生 mouseover 事件。

//当鼠标指针位于元素上方时时,改变元素的背景色:

$(“p”).mouseover(function(){

$(“p”).css(“background-color”,”yellow”);

});

mouseout当鼠标指针从元素上移开时,发生 mouseout 事件。

//当鼠标从元素上移开时,改变元素的背景色

$(“p”).mouseout(function(){

$(“p”).css(“background-color”,”#E9E9E4″);

});

bind()为每个匹配元素的特定事件绑定事件处理函数。

// 当每个段落被点击的时候,弹出其文本。

$(“p”).bind(“click”, function(){

alert( $(this).text() );

});

事件之合成事件

hover()一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

$(“.class”).hover(

function () {

$(this).addClass(“hover”);

},

function () {

$(this).removeClass(“hover”);

}

);

事件之模拟事件

trigger();在每一个匹配的元素上触发某类事件。

//模拟客户提交表单

$(“form:first”).trigger(“submit”);

//模拟客户点击

$(‘.cla’).trigger(‘click’);

//模拟元素获得焦点

$(‘#text’).trigger(‘focus’);

表单操作

val()获得或者设置匹配元素的当前值。

//获取输入框user的值

$(“input[name=’user’]”).val();

//修改输入框user的值

$(“input[name=’user’]”).val(2323);

prop()修改、获取表单属性值

//获取到属性值

$(“input[name=’user’]”).prop(‘value’);

// 禁用

$(“input[name=’user’]”).prop(‘disabled’,true);

//选中

$(“input[name=’love’]”).prop(‘checked’,true);

jquery动画

show()显示隐藏的匹配元素

//将选中的元素显示出来

$(“p”).show();

//将选中的元素缓慢的显示出来,有slow、normal、fast 或者是毫秒数

$(“p”).show(“slow”);

//回调函数,完成效果后执行这个函数

$(“p”).show(“fast”,function(){

$(this).text(“show time !”);

});

hide()隐藏显示的元素

//将选中的元素隐藏出来

$(“p”).hide();

//将选中的元素缓慢的隐藏出来,有slow、normal、fast 或者是毫秒数

$(“p”).hide(“slow”);

//回调函数,完成效果后执行这个函数

$(“p”).hide(“fast”,function(){

alert($(this).text());

});

fadeIn()改变不透明度,直到显示

fadeOut()改变不透明度,直到”消失”

slideUp()改变高度,直到隐藏

slideDown() 改变高度,直到完全显示

animate()自定义动画

可以根据自己的需要进行定制动画。

//同时执行

$(“.one”).animate({

width: “800px”,

height: “500px”,

fontSize: “20px”,

borderWidth:’10px’

}, 1000 );

//顺序执行

$(“.one”).animate({

width:”800px”

},3000).animate({

height:”500px”

},2000).animate({

fontSize :”30px”

},2000);

stop()清除队列,避免动画循环

$(‘.one’).hover(function(){$(this).stop().animate({width:”300px”,height:”400px”},1000);},function(){

$(this).stop().animate({width:”200px”,height:”200px”},1000);

});

其他动画:

toggle()slidToggle()

fadeTo()fadeToggle()

综合应用于jquery选项卡、表单验证、图片轮播等等。

免责声明:本网部分文章和信息来源于互联网,本网转载出于传递更多信息和学习之目的,并不意味着赞同其观点或证实其内容的真实性,如有侵权请通知我们删除!(留言删除
 
 
更多>同类行业

同类新闻
最新资讯
最新发布
最受欢迎
网站首页  |  黄页  |  联系方式  |  信息  |  版权隐私  |  网站地图  |  API推送  |  网站留言  |  RSS订阅  |  违规举报  |  陇ICP备22000095号