兼任性较好的实现鼠标滑过变色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
a{text-decoration:none;}
.over{background-color:green;}
.out{background-color:#FFF;}
</style>
</head>
<body>
<ul>
  <li onmouseover="this.className=‘over‘" onmouseout="this.className=‘out‘">
    <a href="#">html</a>
  </li>
  <li onmouseover="this.className=‘over‘" onmouseout="this.className=‘out‘">
    <a href="#">div+css</a>
  </li>
  <li onmouseover="this.className=‘over‘" onmouseout="this.className=‘out‘">
    <a href="#">javascript</a>
  </li>
  <li onmouseover="this.className=‘over‘" onmouseout="this.className=‘out‘">
    <a href="#">Jquery</a>
  </li>
</ul>
</body>
</html>

时间： 2024-10-12 11:56:38

兼任性较好的实现鼠标滑过变色的相关文章

select自定义箭头问题。。。和一行内不同颜色的整体鼠标滑过变色

1.select自定义箭头问题用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有select的背景. background: #536479 url("../images/sel.png") no-repeat 79px; 既有了背景颜色,又有了自定义的三角箭头. 2. 在一行内不同颜色区域鼠标滑过的时候实现整体颜色变化. 如图所示在tr一行中姓名一列的背景色与其他

JQuery实现鼠标滑过显示导航下拉列表

我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的,当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 <html> <h

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

利用jQuery实现，蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量 position().left position().top 获取元素相对于当前窗口的偏移量 offset().left offset().top 步骤: 1.创建父元素.当前对象.蒙板代码如下: <div class="wrap">

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理.当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考. 1.拖一个动态面板到编辑区: 2.双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态: 3.双击“正常”状态,进入正常状态编辑页面: 4.在动态面

蜗牛—JavaScript学习之鼠标滑过与离开

鼠标划过,图片会变,离开又回复到初识状态 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http

onmouseover 事件-鼠标滑过

onmouseover 鼠标滑过事件 <script> function con(){ alert("xxx") } </script> <body> <button onmouseover='con()'>划过</button> </body>

鼠标滑过触发拉窗式JS效果

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>鼠标滑过触发拉窗式JS效果</title> <link rel="stylesheet" href="