html鼠标悬停事件效果_css中hover的用法

html鼠标悬停事件效果_css中hover的用法 事件之营造事件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()为每个匹配元素的特定事件绑定事件处理函数。

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

$(“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选项卡、表单验证、图片轮播等等。