php气泡效果,CSS_纯CSS3实现鼠标悬停提示气泡效果，<!DOCTYPE HTML> <html> & - phpStudy...

最新推荐文章于 2023-03-31 20:52:12 发布

weixin_39795845

最新推荐文章于 2023-03-31 20:52:12 发布

阅读量181

点赞数

文章标签： php气泡效果

CSS3制作鼠标悬停提示气泡内容菜单

body{

background:#D6D3C9;

color:#383835;

font-family:Arial, Arial, Helvetica, sans-serif;

}

#bubblemenu li {

display: inline;

margin-left: 15px;

cursor:pointer;

}

#bubblemenu li > div {

width: 150px;

min-height: 100px;

position: absolute;

display: inline;

margin-left: -120px;

padding: 5px;

visibility:hidden;

opacity: 0;

margin-top: -125px;

background: #ffffff;

font-size:1em;

/* Setting the border-radius property for all Browsers */

-moz-border-radius: 5px; /* Firefox */

-webkit-border-radius: 5px; /* Safari and Chrome */

border-radius: 5px; /* Browsers that Support it like Opera */

/* Setting the box-shadow property for all Browsers */

-moz-box-shadow: 0 0 8px gray; /* Firefox */

-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */

filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */

box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

/* Setting the transition property for all Browsers */

-moz-transition: all 0.5s ease-in-out; /* Firefox */

-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */

-o-transition: all 0.5s ease-in-out; /* Opera */

transition: all 0.5s ease-in-out; /* Browsers that Support it */

}

#bubblemenu li:hover > div {

visibility:visible;

opacity: 1;

margin-top: -150px;

/* Setting the transition property for all Browsers */

-moz-transition: all 0.5s ease-in-out; /* Firefox */

-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */

-o-transition: all 0.5s ease-in-out; /* Opera */

transition: all 0.5s ease-in-out; /* Browsers that Support it */

}

Coda Effect With CSS3

Penn Jillett

My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them.
Thomas Watson

I think there is a world market for maybe five computers.
Bill Gates

640K ought to be enough for anybody.
Sam Ewing

Computers are like bikinis. They save people a lot of guesswork.

提示：您可以先修改部分代码再运行

weixin_39795845

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php气泡效果,CSS_纯CSS3实现鼠标悬停提示气泡效果，<!DOCTYPE HTML> <html> & - phpStudy...

CSS3制作鼠标悬停提示气泡内容菜单body{background:#D6D3C9;color:#383835;font-family:Arial, Arial, Helvetica, sans-serif;}#bubblemenu li {display: inline;margin-left: 15px;cursor:pointer;}#bubblemenu li > div {widt...
复制链接

扫一扫