jQuery实现鼠标滑过Div层背景变颜色的方法_jquery

本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<html>
<head>
<title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title>
<style type="text/css">
.divbox{
  height:300px;
  width:200px;
  background:#ffffff;
  border:solid 1px #ccc;
  float:left;
  margin-right:10px;
 }
.divOver{
 background:#eff8fe;
border:solid 1px #d2dce3;
}
#zztj{color:#ffffff;}
#zztj a,#zztj a:link,#zztj a:visited,#zztj a:active {color:#ffffff;}
#zztj a:hover {color:#ffffff;}
</style>
<script src="/images/jquery.js"></script>
<script language="javascript">
 $(function(){
  //当鼠标滑入时将div的class换成divOver
  $('.divbox').hover(function(){
    $(this).addClass('divOver'); 
   },function(){
    //鼠标离开时移除divOver样式
    $(this).removeClass('divOver');
   }
  );
 });
</script>
</head>
<body>
<div id="menu">
    <div class="divbox">区块A</div>
    <div class="divbox">区块B</div>
    <div class="divbox">区块C</div>
</div><br>提示:如果不显示预览效果,请<font color=red>刷新一下本页面</font>,因调用了远程的jquery插件,需要加载完成才能运行。
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

时间: 2024-11-08 17:25:45

jQuery实现鼠标滑过Div层背景变颜色的方法_jquery的相关文章

jQuery实现鼠标滑过Div层背景变颜色的方法

 这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="

jquery实现鼠标拖拽滑动效果来选择数字的方法_jquery

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

使用jquery实现鼠标滑过弹出更多相关信息层附源码下载_jquery

当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

js-请问如何通过JS或者jQuery实现鼠标滑到某个div上 页面向左滑动 滑出则停止 向右同理

问题描述 请问如何通过JS或者jQuery实现鼠标滑到某个div上 页面向左滑动 滑出则停止 向右同理 如题. 我在页面上弄了两个div,一个是向左按钮一个是向右按钮. 页面属于左右滑动型. 如何实现鼠标滑到向左的那个div上 页面向左滑动 滑出则停止 向右同理? 谢谢各位大神!拜谢!! 拜托各位看清我的问题好吗,头两个答案根本牛头不对马嘴>.< 我说的是让页面滑动.另外,如果有代码最好--谢谢 解决方案 .on{height:50px;background:#eee}.dd{backgrou

jQuery实现鼠标滑过点击事件音效试听_jquery

废话不多说了,直接看效果图吧. 效果图如下: html代码: <div class="wrapper"> <h1 class="sub-section__title">eventType : </h1> <div class="center" style="margin-top: 40px;"> <div id="trigger-2-hover" cla

jquery实现鼠标滑过后动态图片提示效果实例_jquery

本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

jquery实现鼠标滑过显示提示框的方法_jquery

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

jquery实现鼠标滑过小图查看大图的方法_jquery

本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>

jquery实现鼠标滑过小图时显示大图的方法

 这篇文章主要介绍了jquery实现鼠标滑过小图时显示大图的方法,涉及图片及鼠标操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <