鼠标的悬停效果代码（设置鼠标悬停状态代码）

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

本文目录一览：

• 1、HTML图片鼠标悬停效果设置！
• 2、鼠标悬停导航代码怎么写？
• 3、鼠标悬停效果怎么写，我要js，代码如下
• 4、HTML+CSS制作鼠标悬停效果
• 5、鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？
• 6、css中这个鼠标悬停效果怎么做（求代码），如图

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

style

li {float:left;margin-right:25px;padding:5px}

.active {background-color:red}

.hover {background-color:blue;color:white}

.normal {background-color:white;color:black}

/style

body

ul id="navbar"

li class="active" id="first"首页/li

li id="second"二页/li

li id="third"三页/li

/ul

script type="text/javascript"

var navbar=document.getElementById("navbar");

var items=navbar.getElementsByTagName("li");

var curactiveitem="first";

for(i=0;iitems.length;i++){

items[i].onmouseover=onhover;

items[i].onclick=onactive;

}

function onhover(){

for(i=0;iitems.length;i++){

if(items[i].id!=curactiveitem){

items[i].className="normal";

}

}

if(this.id!=curactiveitem){this.className="hover";}

}

function onactive(){

document.getElementById(curactiveitem).className="normal";

this.className="active";

curactiveitem=this.id;

}

/script

/body

/html

鼠标悬停效果怎么写，我要js，代码如下

onmouseover 鼠标移到某元素之上。

onmouseout 鼠标从某元素移开。

document.getElementById().atta();

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

鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？

代码有bug，修改后如下：

需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg    大图片.jpg

效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。

问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!

!doctype html

html

head

meta charset=utf-8

/head

body

你要显示特效的html  

img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" /

div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" 

大图片显示如下

img src="大图片.jpg" width="500px" height="300px" id="bigimg" /

/div

script type="text/javascript"

let divHover = document.getElementById("divHover");

        function hoverShowDiv() {

        console.log("显示大图片");

            divHover.style.display = "block";

            divHover.style.top = document.getElementById("littleimg").style.top + 10;

            divHover.style.left = document.getElementById("littleimg").style.left + 10;

        }

        function hoverHiddendiv() {

        console.log("显示小图片");

            divHover.style.display = "none";

        }

/script

/body

/html

css中这个鼠标悬停效果怎么做（求代码），如图

以上需要的文件及图片

!doctype html

html

head

meta charset="utf-8"

title无标题文档/title

style

/* 公用 */

body{ margin:0; overflow:hidden;}

img{ display:block;}

span{ display:block;}

a{ text-decoration:none; display:block; color:#000;}

p,h1,h2,h3,h4{ margin:0; font-weight: normal; font-size:12px;}

ul{ margin:0; padding:0;}

input{ margin:0; padding:0; outline:none; border:none;}

body{ font-family:"微软雅黑"; font-size:14px; background-color:#f2f2f2;}

body h2,h3,h4{ color:#000;}

ul{ margin:0; padding:0;}

li{ list-style:none;}

.clearfix{ clear:both;}

/*内容*/

.nav_boxli{ position:relative; float:left; width:100px; text-align:center; margin-top:10px; height:30px; cursor:default;}

.nav_boxlih2{ border-right:1px solid #ccc; height:16px; margin-top:7px; font-weight:bold; width:90px; display:block; text-align:left; padding-left:16px; box-sizing:border-box;}

.nav_boxliimg{ position:absolute; top:12px; right:18px;}

.subnav_box{ position:absolute; top:30px; right:0px; width:300px; height:400px; background-color:#fff; box-sizing:border-box; padding:20px;}

.subnav_box ul{ float:left; margin-right:20px;}

.subnav_box ulli{ line-height:24px;}

.nav_boxli:hover{ background-color:#fff;}

.nav_box li:hover .subnav_box{ display:block;}

/style

script src="jquery.js"/script

script

$(function(){

$(".nav_boxli").mouseenter( function(){

$(".nav_boxli").children(".subnav_box").hide();

$(this).children(".subnav_box").show();

$(this).children("img").attr("src","img/arrow_bottom_gary.png");

}).mouseleave( function(){

$(".nav_boxli").children(".subnav_box").hide();

$(this).children("img").attr("src","img/arrow_top_gary.png");

}

);

})

/script

/head

body

ul class="nav_box"

lih2手机京东/h2

/li

lih2客户服务/h2img src="img/arrow_top_gary.png"

div class="subnav_box" style=" left:-100px; display:none;"

ul

lib特色栏目/b/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

/ul

ul

lib旗下网站/b/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

/ul

/div

/li

lih2 style="border-width:0;"网站导航/h2img src="img/arrow_top_gary.png"

div class="subnav_box" style="display:none;"

ul

lib特色栏目/b/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

/ul

ul

lib企业服务/b/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

/ul

ul

lib旗下网站/b/li

lia href="#"视频购物/a/li

lia href="#"京东社区/a/li

lia href="#"视频购物/a/li

/ul

/div

/li

/ul

/body

/html

鼠标的悬停效果代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于设置鼠标悬停状态代码、鼠标的悬停效果代码的信息别忘了在本站进行查找喔。