鼠标经过有多少种代码（鼠标有多少个按键）

本篇文章给大家谈谈鼠标经过有多少种代码，以及鼠标有多少个按键对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求鼠标经过内容切换代码
• 2、网页制作时，鼠标经过图片的三种状态，第三种是怎么实现，用什么代码？
• 3、网页里关于鼠标经过点击的各种属性
• 4、鼠标经过显示描述 css代码
• 5、html鼠标经过自动展开和点击展开代码。

求鼠标经过内容切换代码

style type="text/css"

body {

background: #fff;

font-family: "Lucida Grande", Helvetica, Arial, sans-serif;

font-size: 12px;

}

#hoverpage ul#outer li div p {font-size:12px; line-height:16px; margin:5px 0 15px 0;}

#hoverpage ul#outer li div h2 {line-height:1em; color:#585; font-size:1.5em; font-weight:normal; margin-top:0; font-family:verdana, sans-serif;}

#hoverpage ul#outer li div h3 {line-height:1em; color:#66a; font-size:1.2em; font-weight:normal; margin-top:0;}

#hoverpage ul#outer li div h3.clear {clear:left;}

#hoverpage {width:650px; height:450px; border:1px solid #aaa; background:#fff; position:relative; z-index:500; overflow:hidden; text-align:left;}

#hoverpage table {border-collapse:collapse; margin:-1px;}

#hoverpage ul#outer {background:transparent; padding:0; margin:0;list-style:none;}

#hoverpage ul#outer li.page {display:inline;} /* needed for IE to function correctly */

#hoverpage ul#outer li.page a.menuitem {text-decoration:none;}

#hoverpage ul#outer li.page i {position:absolute; display:block; height:25px; right:500px; background:transparent; cursor:default; z-index:100; text-align:right; text-decoration:none; color:#080; font-style:normal; cursor:pointer;}

#hoverpage ul#outer li.p1 i {top:30px;}

#hoverpage ul#outer li.p2 i {top:55px;}

#hoverpage ul#outer li.p3 i {top:80px;}

#hoverpage ul#outer li.p4 i {top:105px;}

#hoverpage ul#outer li.p5 i {top:130px;}

#hoverpage ul#outer li.page div {display:block; width:600px; height:400px; padding:25px; font-weight:normal; color:#444;}

#hoverpage ul#outer li.p1 div {background:#fff url(page1_back.jpg);}

#hoverpage ul#outer li.p2 div {background:#fff url(page2_back.jpg);}

#hoverpage ul#outer li.p3 div {background:#fff url(page3_back.jpg);}

#hoverpage ul#outer li.p4 div {background:#fff url(page4_back.jpg);}

#hoverpage ul#outer li.p5 div {background:#fff url(page5_back.jpg);}

#hoverpage ul#outer li div img {border:1px solid #888; float:right; margin:0 10px 5px 0;}

#hoverpage ul#outer li div p.big {line-height:1em; color:#004; font-size:1.5em;}

#hoverpage ul#outer li div a {color:#00c; text-decoration:underline;}

#hoverpage ul#outer li div em {display:block; width:190px; height:230px; float:left; background:transparent url(current.gif) no-repeat; margin-right:10px;}

#hoverpage ul#outer li.p1 div em {background-position: 21px 0;}

#hoverpage ul#outer li.p2 div em {background-position: 21px 25px;}

#hoverpage ul#outer li.p3 div em {background-position: 21px 50px;}

#hoverpage ul#outer li.p4 div em {background-position: 21px 75px;}

#hoverpage ul#outer li.p5 div em {background-position: 21px 100px;}

#hoverpage ul#outer li.page div a:hover {text-decoration:none;}

#hoverpage ul#outer li.page a:hover {white-space:normal;} /* for IE6 */

#hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}

#hoverpage ul#outer a:hover i {color:#66a; font-weight:bold;} /* for IE6 */

#hoverpage ul#outer :hover a i {color:#66a; font-weight:bold;}

#hoverpage ul#outer div ul li {line-height:20px; font-size:0.9em; color:#256; list-style-type:disc;}

#hoverpage ul#outer div ul li a {line-height:20px; font-size:1.1em; color:#c00;}

#hoverpage ul#outer div dl dd {line-height:20px; font-size:1.1em; color:#448;}

#hoverpage ul#outer div dl dt {line-height:30px; font-size:1.3em; color:#333;}

/style

这里只是css代码，还有部分代码，在这里发不了，需要的找我，很乐意帮你解决问题。

网页制作时，鼠标经过图片的三种状态，第三种是怎么实现，用什么代码？

img src="aa" onmouseup="test()"

script

function test()

{

if(event.button==2)//右键

{

图片.src="xxx";

}

}

/script

网页里关于鼠标经过点击的各种属性

在CSS定义鼠标经过点击的各种属性基本有以下四个：

a:link --连接平常的状态

a:visited --连接被访问过之后

a:hover--鼠标放到连接上的时候

a:active--连接被按下的时候

比如，a:hover {color: #800080} /* 鼠标移动到链接上时的状态 */

意思：鼠标移动到链接上时候的链接对象颜色呈现紫色。

鼠标经过显示描述 css代码

我想你这个问题描述的不是太清晰吧，

我猜想你是想说鼠标经过图片的时候在图片的底部显示描述性文字吧？

这个实现起来非常困难，你应该也了解，css可以通过伪类实现一些互动效果，但是所有这些互动效果都有一个很大的限制，通过伪类只能实现事件发生元素本身的特效，比如，我们通过纯css不可能实现你点击一个按钮而改变一个文本框的背景色；

不过这个问题你只需稍微使用一点js就可以轻松搞定的；

不过按照你的要求，使用纯css，我给出的两种实现方式；

第一种：

html

style type="text/css"

div{

width: 200px;

height: 200px;

margin:50px;

background: #888;

}

a{

display: block;

width: 200px;

height: 200px;

text-indent: -9999px;

background-image: url("./1.jpg");

}

a:hover{

text-indent: 10px;

white-space: nowrap;

text-overflow: clip;

overflow: hidden;

vertical-align: bottom;

line-height:370px;

color: #111;

text-decoration: none;

}

/style

body

div

a href="#"

河南人网上晒幸福 称幸福是早喝胡辣汤

/a

/div

body

/html

第二种：

html

style type="text/css"

div{

width: 200px;

height: 200px;

margin: 50px;

background: #888;

position: relative;

}

img{

width:200px;

height: 200px;

}

a{

display: block;

position: absolute;

width: 200px;

height: 200px;

top: 0;

left: 0;

text-indent: -9999px;

}

a:hover{

color: orange;

text-decoration: none;

white-space: nowrap;

text-indent:10px;

overflow: hidden;

line-height: 370px;

}

/style

body

div

img src="./1.jpg" /

a href="#"

河南人网上晒幸福 称幸福是早喝胡辣汤

/a

/div

body

/html

不过这两种方法与js实现方式相比很不实用，而且弊端较多，例如文字只能显示一行，最后文字的切割痕迹无法消除，网页内容与表现无法截然分离，所以纯css的实现基本上不会在专业的网站上使用。

但愿以上回答能让你满意。

html鼠标经过自动展开和点击展开代码。

1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。

2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。

3．运行代码，效果如下。

4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。

5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。

6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。

7．在浏览器中运行代码以达到预期的效果。

鼠标经过有多少种代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于鼠标有多少个按键、鼠标经过有多少种代码的信息别忘了在本站进行查找喔。