html 鼠标移到元素上显示一段工具提示文本 |
您所在的位置：网站首页 › 怎么设置鼠标自动消失状态显示 › html 鼠标移到元素上显示一段工具提示文本 |
|
参考：https://zhidao.baidu.com/question/2010707923470635268.html 1、方法一，利用html特性，每个标签都有一个title属性。当鼠标hover在该标签内容上时，浏览器展示出该标签的title内容，让鼠标移走，内容消失 PRC was founded in 1949.W3School.com.cn 2、方法二，利用css的伪类hover，以及显示隐藏属性display，来实现如下： Document .continer { height: 100px; width: 100px; background-color: aqua; } .continer div { display: none; /*默认隐藏*/ } .continer:hover div { display: initial; /*当鼠标hover时展示*/ } 文字内容文字内容 我是鼠标悬停展示的内容3.CSS伪类兼容性 IE6、IE7只支持锚伪类（a:link、a:visited、a:hover、a:active）；IE8可支持:focus、:first-child、:lang 伪类，但需要加；IE9+可支持大部分伪类选择器。 //IE 7-11都支持 //chrome v89（其他版本没测）支持 Document .continer { height: 100px; width: 100px; background-color: aqua; } .continer { display: initial; /*默认隐藏*/ } .continer:hover { display: none; /*当鼠标hover时展示*/ } 文字内容文字内容 我是鼠标悬停展示的内容 //IE 7-11都支持 //chrome v89（其他版本没测）支持 Document .continer { height: 100px; width: 100px; background-color: aqua; } .continer { display: initial; /*默认隐藏*/ } .continer:hover { display: none; /*当鼠标hover时展示*/ } .continer div { display: none; /*默认隐藏*/ } .continer:hover div { display: initial; /*当鼠标hover时展示*/ } 文字内容文字内容 我是鼠标悬停展示的内容 //IE 7-11都支持 //chrome v89（其他版本没测）支持 Document .continer { height: 100px; width: 100px; background-color: aqua; } .continer { display: initial; /*默认隐藏*/ } .continer:hover { display: initial; /*当鼠标hover时展示*/ } .continer div { display: initial; /*默认隐藏*/ } .continer:hover div { display: none; /*当鼠标hover时展示*/ } 文字内容文字内容 我是鼠标悬停展示的内容
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |