css hover与jquery

hover是鼠标悬停css效果,但在一些浏览器如ie6中,只对<a href=""/>有效。

jQuery可以为我们解决这个问题:

jQuery提供的hover()

方法做为一个事件,不仅可以改变CSS样式的,还可以做其他动作;

非常类似于mouseover mouseout的组合。

代码如下:

$(function(){
           $(".htest").hover(
            function(){
                $(this).css("cursor","pointer");
                $(this).css("color","red");
                $(this).css("position","relative");
                $(this).css("top","2px");
                $(this).css("left","2px");
            },
            function(){
                $(this).css("cursor","pointer");
                $(this).css("color","blue");
                $(this).css("position","relative");
                $(this).css("top","0px");
                $(this).css("left","0px");
            }
            );
          $(".mtest").mouseover(function(){
                $(this).css("cursor","pointer");
                $(this).css("color","red");
                $(this).css("position","relative");
                $(this).css("top","2px");
                $(this).css("left","2px");
            });
            $(".mtest").mouseout(function(){
                $(this).css("cursor","pointer");
                $(this).css("color","blue");
                $(this).css("position","relative");
                $(this).css("top","0px");
                $(this).css("left","0px");
            });
});

时间: 2024-08-04 06:01:53

css hover与jquery的相关文章

宠物小精灵专属配色网站+CSS HOVER动画收集站

  Okepalettes 是一个比较特别的配色网站,它里面所有的配色方案都来自口袋妖怪里面的妖怪角色,口袋妖怪也称:Pokemon.宠物小精灵.神奇宝贝,相信不少用户看过这部动画片或玩过这个游戏.另外一枚网站是专门收集CSS Hover动画的,都很酷炫,来收~ Pokepalettes配色网站目前有600多个口袋妖怪角色配色,用户可以输入角色的英文名称或者编号就可以快速转到对应的角色.而主角皮卡丘的编号是#25,所以这里输入数字25然后按回车键就可以了,注意不要输入"#"号! Pok

ie6 css hover背景效果兼容多浏览器

 代码如下 复制代码 <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="c

利用css :hover实现三级菜单效果(不需要js)

使用css中的:hover制作菜单,有一点需要注意的是在设计菜单时,要先设计一级菜单(使用position: relative;),使用同样样式,二级菜单div{display: none;} ,再设计二级菜单div后的ul位置(使用position: absolute;).  代码如下 复制代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8″>

CSS教程和jQuery教程:WEBJX收集国外新手网页设计教程

文章简介:随着CSS3的流行,现在已经有很多利用CSS3制作的网站,CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易.而jQuery作为最热门的Ajax框架,在互联网网站到处都有jQuery的身影.在本文中,就将为新手网页设计师分享29个新鲜实用的jQuery和CSS3教程,希望能 随着CSS3的流行,现在已经有很多利用CSS3制作的网站,CSS3提供了很多的设计上的新技术和高级功能,使创建网站变得更容易.而jQuery作为最热门的Ajax框架,在互联网网站到处都有jQuery

jQuery添加/改变/移除CSS类及判断是否已经存在CSS_jquery

改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:"jQuery让JavaScript代码变得简洁!",言归正传,来看jquery如何添加.移除CSS类: 1. removeClass() - 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldC

基于jQuery UI CSS Framework开发Widget的经验_jquery

jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if

jQuery+CSS实现简单切换菜单示例_jquery

本文实例讲述了jQuery+CSS实现简单切换菜单的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标

jQuery+CSS实现一个侧滑导航菜单代码_jquery

侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单.它可以展示重点信息,使其更有可读性和美观性,满足用户体验价值! 今天小编给大家展示如何使用jquery和css实现侧滑菜单. 效果展示      源码下载 为了建立导航菜单,让我们先看看html结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

jQuery+css实现的切换图片功能代码_jquery

本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t