`

鼠标hover悬停事件

    博客分类:
  • UI
阅读更多

<title>鼠标hover悬停事件</title>
<script src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">
$(function(){
	
	$("#ok").hover(
		function(){
			$("#ok").css({color:'#FFFFFF', background:'#83A7D8'});
		},
		function(){
			$("#ok").css({color:'#000000', background:'#FFFFFF'});
		}
	);
})


</script>

</head>

<body>

<div id="ok" style="height:50px; width:200px; border:1px solid #69C">
</div>

</body>
</html>

分享到:
评论

相关推荐

    7款CSS3鼠标hover悬停动画特效代码

    本文将深入探讨7款使用CSS3实现的鼠标hover悬停动画特效,以及如何通过改造这些特效来适应不同的设计需求。 1. **渐变过渡(Gradient Transitions)** 当鼠标悬停在元素上时,通过改变背景颜色的渐变方向或颜色,...

    7款CSS3鼠标hover悬停动画特效代码.zip

    【CSS3鼠标hover悬停动画特效】是一种利用CSS3特性实现的交互效果,当鼠标指针悬停在某个元素上时,该元素会呈现出预先设定的动态变化。这些动画不仅提升了用户体验,还使网站或应用更具吸引力。在这个压缩包中包含...

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示

    jquery实现鼠标hover悬停遮罩显示特效源码.zip

    《jQuery实现鼠标hover悬停遮罩显示特效》 在网页设计中,动态效果常常能提升用户体验,其中一种常见的效果就是鼠标悬停时显示遮罩层。这个特效在各种交互元素中广泛应用,比如图片预览、按钮悬停提示等。本教程将...

    CSS3图文卡片鼠标hover悬停动画特效

    【CSS3图文卡片鼠标hover悬停动画特效】是一种利用CSS3技术实现的交互设计,它在用户将鼠标指针悬停在图文卡片上时,能够触发一个动态效果,提升用户体验。这种特效通常应用于网站的内容展示,如博客文章、产品介绍...

    css3鼠标hover悬停卡片动画特效.zip

    综上所述,"css3鼠标hover悬停卡片动画特效.zip"可能包含的是一组CSS样式和HTML结构,用于实现当鼠标悬停在卡片元素上时,触发各种动画效果,如颜色变化、大小变换、旋转或淡入淡出等。这些特效能够提升网页的视觉...

    鼠标悬停hover样式,简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效

    在网页设计中,鼠标悬停(hover)样式是一种常见的交互设计元素,用于增强用户体验和页面互动性。CSS3(层叠样式表第三版)提供了丰富的功能来实现这种效果,包括改变边框、颜色、背景图以及动画效果。本文将详细...

    关于Jquery的鼠标悬停事件

    本文将深入探讨jQuery中的鼠标悬停事件,这是创建交互式网页时常用的一种功能。通过了解和掌握这一技术,我们可以使用户界面更加生动活泼,提升用户体验。 首先,我们要知道jQuery提供了两个主要的鼠标悬停事件:`...

    jquery hover鼠标悬停遮罩显示

    总的来说,"jquery hover鼠标悬停遮罩显示"这个主题主要涉及到使用jQuery处理鼠标悬停事件,以及通过CSS和JavaScript实现遮罩层的显示和隐藏。这个功能可以增强网站的交互性和用户体验,使得用户在鼠标悬停时能够更...

    鼠标hover悬停图片css3动画特效

    本教程将详细讲解如何利用CSS3的`transition`和`transform`属性来实现一款鼠标悬停时的图片动画特效,这将为用户的界面体验增添一份酷炫感。 首先,`transition`属性是CSS3中的关键特性之一,它允许我们定义当元素...

    jQuery hover鼠标悬停事件侧边导航菜单结合css3动画

    "jQuery hover鼠标悬停事件侧边导航菜单结合css3动画"是一个典型的应用场景,它将jQuery的hover事件与CSS3的动画效果相结合,以实现优雅且吸引人的侧边导航菜单。 首先,`jQuery.hover()` 是一个组合事件处理函数,...

    CSS3鼠标HOVER图片悬停方向感知特效

    【CSS3鼠标HOVER图片悬停方向感知特效】是一种创新的网页交互设计,它通过CSS3的特性,为用户提供了更为生动的视觉体验。在网页中,当鼠标悬停在图片上时,会触发一个半透明的遮罩层覆盖在图片上。这个遮罩层不仅...

    鼠标经过事件Tab-hover

    鼠标经过事件Tab-hover鼠标经过事件Tab-hover

    jquery hover事件鼠标悬停九宫格图片高亮显示代码

    本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验,使用户更容易注意到并操作特定的图像元素。 首先,我们需要理解`hover`事件。在...

    jquery hover鼠标悬停两张图片滑动显示对应的标题切换

    在`hover`事件中,我们可以根据鼠标悬停的图片来改变标题的可见性。 代码示例: ```html 图片1"&gt; ;"&gt;标题1 图片2"&gt; ;"&gt;标题2 ``` ```javascript $(document).ready(function() { $('.image1').hover...

    jquery hover鼠标悬停到图文列表时滑动图片切换

    "jquery hover鼠标悬停到图文列表时滑动图片切换"这个主题涉及到了jQuery中的`hover`事件以及动态改变图片显示的技巧。下面我们将详细探讨这些知识点。 一、jQuery `hover`事件 `hover`是jQuery中的一个复合事件,...

    css3卡片鼠标悬停

    1. **选择器**:CSS3引入了更强大的选择器,如类选择器(`.class`)、ID选择器(`#id`)、伪类选择器(`:hover`)等,其中`:hover`伪类是实现鼠标悬停效果的核心,它允许我们在鼠标指针位于某个元素上时应用特定的...

    7种CSS3鼠标hover图片效果.zip

    "7种CSS3鼠标hover图片效果.zip"是一个资源包,它包含了七种不同的CSS3技术实现的鼠标hover时图片变换效果。这些效果可以通过引入名为“magic.css”的样式表来实现,让网站的用户体验更加生动有趣。 首先,让我们...

    15种CSS3图片Hover悬停效果代码.rar

    "15种CSS3图片Hover悬停效果代码"这个压缩包包含了一系列实现图片悬停效果的代码示例,这些效果可以为用户在鼠标指针悬停在图片上时提供动态且吸引人的视觉反馈。以下将详细解析这些知识点: 1. **`:hover`伪类**:...

Global site tag (gtag.js) - Google Analytics