代码html鼠标效果（html 鼠标）

本篇文章给大家谈谈代码html鼠标效果，以及html 鼠标对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html怎么实现鼠标放在文字上显示文字
• 2、HTML+CSS制作鼠标悬停效果
• 3、html鼠标经过自动展开和点击展开代码。
• 4、html怎么实现鼠标放在文字上显示文字（附带代码）？
• 5、HTML图片鼠标悬停效果设置！
• 6、html鼠标移动到超链接上时，显示图片的效果怎么做的？

html怎么实现鼠标放在文字上显示文字

1、需要结合JavaScript实现，首先打开sublime text编辑器，新建一个html文件，写入一个标签和弹出层div，分别设置它们的鼠标移入和移出事件；最后简单的设置两个html标签的样式，让弹出层默认隐藏，设置弹出层的大小背景等属性：

2、接着在下方的script标签设置两个函数，一个是鼠标移入时触发用来显示div，另一个用来设置移出鼠标时让div消失；函数体内直接获取div的dom元素并设置display属性就可以了：

3、最后打开浏览器，可以看到一段文字：

4、当把鼠标移入时，就会显示出隐藏的div文字了：

HTML+CSS制作鼠标悬停效果

!DOCTYPE html

html

head

    meta charset="UTF-8"

    title鼠标悬停效果/title

    style type="text/css"

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background-color: #000;

        }

        a{

            width: 200px;

            height: 50px;

            display: block;

            text-align: center;

            line-height: 50px;

            text-decoration: none;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            font-size: 24px;

            font-weight: bold;

            color: white;

            border: 1px solid white;

            overflow: hidden;

        }

        a::before{

            content: "";

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent);

            transition: all 0.5s;

        }

        a:hover::before{

            left: 100%;

        }

        a:hover{

            box-shadow: 0 2px 10px 8px rgba(146,148,248,.4);

        }

    /style

/head

body

    a href="#"鼠标悬停效果/a

/body

/html

CSS+HTML悬停下划线效果

!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    meta name="viewport" content="width=device-width, initial-scale=1.0"

    meta http-equiv="X-UA-Compatible" content="ie=edge"

    titleDocument/title

    style

        body {

            display: flex;

            height: 100vh;

            justify-content: center;

            align-items: center;

        }

        ul {

            padding: 0;

            margin: 0;

            list-style-type: none;

        }

        ul li{

            padding: 5px 0;

        }

        ul li a {

            position: relative;

            display: inline-block;

            text-decoration: none;

            color: #3a3a3a;

            /* 转大写 */

            text-transform: uppercase;

            padding: 4px 0;

            transition: 0.5s;

            font-weight: bold;

        }

        ul li a::after {

            position: absolute;

            content: "";

            width: 100%;

            height: 3px;

            top: 100%;

            left: 0;

            background: #347cdb;

            transition: transform 0.5s;

            transform: scaleX(0);

            transform-origin: right;

        }

        ul li a:hover {

            color: #585858;

            text-shadow: 0 0 10px #ccc;

        }

        ul li a:hover::after {

            transform: scaleX(1);

            transform-origin: left;

        }

    /style

/head

body

    ul

        lia href="#"home/a/li

        lia href="#"archives/a/li

        lia href="#"tags/a/li

        lia href="#"categories/a/li

        lia href="#"about/a/li

    /ul

/body

/html

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

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

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

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

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

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

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

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

html怎么实现鼠标放在文字上显示文字（附带代码）？

实现鼠标悬停显示文字，html中使用title属性就可实现显示文字的效果，这个属性还是比较实用的，你可以参考下

a href="#" title="这里是显示的文字"hello/a

当鼠标悬停在 hello上一会就会有文字 "这里是显示的文字" 显示。

HTML图片鼠标悬停效果设置！

@charset "utf-8";

/*科e互联特效基本框架CSS*/

body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}

h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}

bodydiv{margin:0 auto}

div {text-align:left}

a img {border:0}

body { color: #333; text-align: center; font: 12px "微软雅黑"; }

ul, ol, li {list-style-type:none;vertical-align:0}

a {outline-style:none;color:#535353;text-decoration:none}

a:hover { color: #D40000; text-decoration: none}

.clear{height:0; overflow:hidden; clear:both}

.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

}

.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}

.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}

.cor_bs,.cor_bs:hover{color:#ffffff;}

.keBody{background:url(../images/bodyBg.jpg) repeat #333;}

.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}

.kePublic{background:#dfdfdf; padding:50px;}

.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}

.keTxtP{font-size:16px; color:#ffffff;}

.keUrl{color:#FFF; font-size:30px;}

.keUrl:hover{ text-decoration: underline; color: #FFF; }

.mKeBanner,.mKeBanner div{text-align:center;}

/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/

/* 效果CSS开始 */

body {

-webkit-backface-visibility: hidden;

}

.demo {

margin: 0px auto;

text-align:center;

}

.nav li {

position: relative;

display: inline-block;

margin-left: -50px;

-webkit-transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

-ms-transition: all 0.4s linear;

transition: all 0.4s linear;

}

.nav li a {

display: inline-block;

width: 120px;

height: 120px;

padding: 30px;

border-radius: 50%;

border-width: 8px;

border-style: solid;

}

.nav li:hover {

z-index: 11;

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

-ms-transform: scale(1.1);

transform: scale(1.1);

}

.nav li:hover a {

text-decoration: none;

}

.nav li:hover span {

-webkit-transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

-ms-transition: all 0.4s linear;

transition: all 0.4s linear;

-webkit-animation: moveFromBottom 0.3s ease;

-moz-animation: moveFromBottom 0.3s ease;

-o-animation: moveFromBottom 0.3s ease;

-ms-animation: moveFromBottom 0.3s ease;

animation: moveFromBottom 0.3s ease;

}

.nav li:nth-child(1) a {

color: #4d9683;

text-shadow: 0 1px 0 #9de3cf;

border-color: #549e89;

background-color: #51c9a7;

}

.nav li:nth-child(2) a {

color: #be607e;

text-shadow: 0 1px 0 #de8ba5;

border-color: #e499b0;

background-color: #e67b9c;

}

.nav li:nth-child(3) a {

color: #5e9eb4;

text-shadow: 0 1px 0 #adddec;

border-color: #a2cfde;

background-color: #7ec9e3;

}

.nav li:nth-child(4) a {

color: #ba9d5e;

text-shadow: 0 1px 0 #f5e0ad;

border-color: #dcc999;

background-color: #f0cd78;

}

.nav li:nth-child(5) a {

color: #b468a2;

text-shadow: 0 1px 0 #e8acd8;

border-color: #d8abcd;

background-color: #dd91cb;

}

.nav li:nth-child(1):hover a {

color: #0f775c;

text-shadow: 0 1px 0 #81e6c9;

border-color: #0a8462;

background-color: #00c18c;

}

.nav li:nth-child(2):hover a {

color: #b12a55;

text-shadow: 0 1px 0 #ff95b7;

border-color: #ba335c;

background-color: #ea5180;

}

.nav li:nth-child(3):hover a {

color: #2883a2;

text-shadow: 0 1px 0 #9cdef2;

border-color: #4397b3;

background-color: #55c1e5;

}

.nav li:nth-child(4):hover a {

color: #ab8228;

text-shadow: 0 1px 0 #ffe199;

border-color: #b08f3e;

background-color: #f8c64d;

}

.nav li:nth-child(5):hover a {

color: #a33689;

text-shadow: 0 1px 0 #ec97d6;

border-color: #b7569f;

background-color: #dd70c3;

}

.nav span {

display: block;

line-height:70px;

font-size: 30px;

font-style: normal;

}

.nav span:before {

display: block;

}

.nav li:nth-child(1) span:before {

content: "home";

}

.nav li:nth-child(2) span:before {

content: "phone";

}

.nav li:nth-child(3) span:before {

content: "wifi";

}

.nav li:nth-child(4) span:before {

content: "setting";

}

.nav li:nth-child(5) span:before {

content: "twitter";

}

@-webkit-keyframes moveFromBottom {

from {

-webkit-transform: translateY(120%) scale(0.5) ;

opacity: 0;

}

to {

-webkit-transform: translateY(0%) scale(1);

opacity: 1;

}

}

@-moz-keyframes moveFromBottom {

from {

-moz-transform: translateY(120%) scale(0.5) ;

opacity: 0;

}

to {

-moz-transform: translateY(0%) scale(1);

opacity: 1;

}

}

@-ms-keyframes moveFromBottom {

from {

-ms-transform: translateY(120%) scale(0.5) ;

opacity: 0;

}

to {

-ms-transform: translateY(0%) scale(1);

opacity: 1;

}

}

@-o-keyframes moveFromBottom {

from {

-o-transform: translateY(120%) scale(0.5) ;

opacity: 0;

}

to {

-o-transform: translateY(0%) scale(1);

opacity: 1;

}

}

@keyframes moveFromBottom {

from {

transform: translateY(120%) scale(0.5) ;

opacity: 0;

}

to {

transform: translateY(0%) scale(1);

opacity: 1;

}

}

.nav span:before {

font-family: 'LigatureSymbols';

text-rendering: optimizeLegibility;

-webkit-font-smoothing: antialiased;

-moz-font-smoothing: antialiased;

-ms-font-smoothing: antialiased;

-o-font-smoothing: antialiased;

font-smoothing: antialiased;

-webkit-font-feature-settings: "liga" 1, "dlig" 1;

-moz-font-feature-settings: "liga=1, dlig=1";

-ms-font-feature-settings: "liga" 1, "dlig" 1;

font-feature-settings: "liga" 1, "dlig" 1;

font-size: 80px;

}

@font-face {

font-family: 'LigatureSymbols';

src: url('../font/LigatureSymbols-2.05.eot');

src: url('../font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),

url('../font/LigatureSymbols-2.05.woff') format('woff'),

url('../font/LigatureSymbols-2.05.ttf') format('truetype'),

url('../font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');

font-weight: normal;

font-style: normal;

}

/* 效果CSS结束 */

html鼠标移动到超链接上时，显示图片的效果怎么做的？

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的script标签中，输入js代码：

$('a').hover(function(){$('img').css('display','block');})

3、浏览器运行index.html页面，此时鼠标移动到超链接上，下面的图片自动显示了出来。

关于代码html鼠标效果和html 鼠标的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。