整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

纯CSS实现鼠标悬停提示的方法（CSS小白第三期）

标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合Javascript创建各式各样的自定义提示，其实通过CSS定位也可以实现，首先我们看一下效果图：

接下来我们详细介绍它的实现方法：

  1. 首先创建一个简单的带链接的HTML（根据自己的需要），在链接显示的文本后面添加需要提示的内容并置于span标签中（加粗部分）

    <p>

    <a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未满18周岁请勿点击)</span></a> is a Horror Movies Website.

    </p>

  2. 接下来是关键部分，先将链接的position属性设置为relative,因为<a>是<span>的父级元素，这样接下来才可以让<span>中的提示内容根据<a>中的链接文本进行绝对定位。<span>中的提示内容我们不希望它一开始就显示出来，所以要将它的display属性设置为none.

    a{position:relative;}

    a span{display:none;}

  3. 当鼠标悬停在链接上时我们希望显示出span中的提示内容，这时就需要将span的display属性设置为block，为了让其出现在链接的右下方，需要将span的position属性设置为absolute，并设置一定的距离（顶部1em,左边2em).

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;}

  4. 前两步基已经完成了本次案例的主体，剩下的就是给span添加一些样式，让它看起来更像是提示。可以添加一些内边距 边框和背景颜色等。

    <style type="text/css">

    a{position:relative;}

    a span{display:none;}

    a:hover span{display:block;

    position:absolute;top:1em;left:2em;

    width:160px;

    padding:0.2em 0.6em;

    border:1px solid #996633;

    background-color:#FFFF66;

    color:red;}

    </style>

    PS:最后科普一下display:none与visible:hidden的区别

    display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

    visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

实现鼠标悬停时图片放大的效果，可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例代码：

HTML:

<img src="image.jpg" id="myImage" />

CSS (仅供示例，可根据实际需求调整样式):

#myImage {

transition: transform 0.3s;

}

#myImage:hover {

transform: scale(1.2);

}

JavaScript (用于添加鼠标悬停事件监听器):

document.getElementById("myImage").addEventListener("mouseover", function () {

// 这里可以添加其他鼠标悬停时的操作

});


document.getElementById("myImage").addEventListener("mouseout", function () {

// 这里可以添加鼠标移出时的操作

});

在上述代码中，当鼠标悬停在图片上时，通过 CSS 的 transform:scale(1.2) 实现了图片放大的效果。同时，使用 JavaScript 添加了鼠标悬停和移出事件的监听器，以便在这些事件发生时执行其他操作。


标悬停系列1-1

css源码

.hoverB1 {
 background: none;
 border: 0;
 box-sizing: border-box;
 margin: 1em;
 height: 45px;
 width: 160px;
 box-shadow: inset 0 0 0 2px #f8c013;
 color: #f8c013;
 font-size: inherit;
 font-weight: 700;
 position: relative;
 vertical-align: middle;
 transition: color 0.25s;
}
.hoverB1::before, .hoverB1::after {
 box-sizing: inherit;
 content: '';
 position: absolute;
 border: 2px solid transparent;
 width: 0;
 height: 0;
}
.hoverB1::before {
 top: 0;
 left: 0;
}
.hoverB1::after {
 bottom: 0;
 right: 0;
}
.hoverB1:hover {
 color: #60daaa;
}
.hoverB1:hover::before, .hoverB1:hover::after {
 width: 100%;
 height: 100%;
}
.hoverB1:hover::before {
 border-top-color: #60daaa;
 border-right-color: #60daaa;
 transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hoverB1:hover::after {
 border-bottom-color: #60daaa;
 border-left-color: #60daaa;
 transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

html源码

<button class="hoverB1">hover1</button>

鼠标悬停系列1-2

css源码

.hoverB2 {
 background: none;
 border: 0;
 box-sizing: border-box;
 margin: 1em;
 height: 45px;
 width: 160px;
 box-shadow: inset 0 0 0 2px #f45e61;
 color: #f45e61;
 font-size: inherit;
 font-weight: 700;
 position: relative;
 vertical-align: middle;
 transition: color 0.25s;
}
.hoverB2::before, .hoverB2::after {
 box-sizing: inherit;
 content: '';
 position: absolute;
 border: 2px solid transparent;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 -webkit-transform-origin: center;
 transform-origin: center;
}
.hoverB2:hover {
 color: #6477b9;
}
​
.hoverB2::before {
 border-top: 2px solid #6477b9;
 border-bottom: 2px solid #6477b9;
 -webkit-transform: scale3d(0, 1, 1);
 transform: scale3d(0, 1, 1);
}
.hoverB2::after {
 border-left: 2px solid #6477b9;
 border-right: 2px solid #6477b9;
 -webkit-transform: scale3d(1, 0, 1);
 transform: scale3d(1, 0, 1);
}
.hoverB2:hover::before, .hoverB2:hover::after {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
 transition: -webkit-transform 0.5s;
 transition: transform 0.5s;
 transition: transform 0.5s, -webkit-transform 0.5s;
}

html源码

<button class="hoverB2">hover2</button>

鼠标悬停系列1-3

css源码

.hoverB3 {
 width:160px;
 height:45px;
 line-height: 45px;
 text-align: center;
 position: relative;
 appearance: none;
 background: #f72359;
 border: none;
 color: white;
 font-size: 1.2em;
 cursor: pointer;
 outline: none;
 overflow: hidden;
 border-radius: 80px;
 display: inline-block;
}
.hoverB3 span {
 position: relative;
}
.hoverB3::before {
 --size: 0;
 content: '';
 position: absolute;
 left: var(--x);
 top: var(--y);
 width: var(--size);
 height: var(--size);
 background: radial-gradient(circle closest-side, #4405f7, transparent);
 transform: translate(-50%, -50%);
 transition: width .2s ease, height .2s ease;
}
.hoverB3:hover::before {
 --size: 400px;
}

html源码

<button class="hoverB3"><span>hover3</span></button>


鼠标悬停系列2-1

公共css源码

.set_1_btn {
 color: #333;
 cursor: pointer;
 display: block;
 font-size: 16px;
 font-weight: 400;
 line-height: 45px;
 margin-right: 2em;
 text-align: center;
 max-width: 160px;
 position: relative;
 text-decoration: none;
 text-transform: uppercase;
 vertical-align: middle;
 width: 100%;
}
.set_1_btn:hover {
 text-decoration: none;
}

css源码

.Vbtn-1 {
 background:transparent;
 text-align: center;
 float:left;
}
.Vbtn-1 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
.Vbtn-1 rect {
 fill: none;
 stroke: #e1b700;
 stroke-width: 3;
 stroke-dasharray: 422, 0;
 transition: all 450ms linear 0s;
}
.Vbtn-1:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
 transition: all 150ms linear 0s;
}
.Vbtn-1:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html源码

<a href="#" class="set_1_btn Vbtn-1"> 
 <svg>
 <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
 </svg>
 Hover 
</a>

鼠标悬停系列2-2

css源码

.Vbtn-2 {
 letter-spacing: 0;
 transition: all 150ms linear 0s;
 float:left;
}
.Vbtn-2:hover, .Vbtn-2:active {
 letter-spacing: 5px;
 transition: all 150ms linear 0s;
}
.Vbtn-2:after, .Vbtn-2:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 -webkit-transition: all 280ms ease-in-out;
 transition: all 280ms ease-in-out;
 width: 0;
}
.Vbtn-2:hover:after, .Vbtn-2:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #56c5ff;
 -webkit-transition: width 350ms ease-in-out;
 transition: width 350ms ease-in-out;
 width: 70%;
}
.Vbtn-2:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

html源码

<a href="#" class="set_1_btn Vbtn-2">Hover</a>

鼠标悬停系列2-3

css源码

.Vbtn-3 {
 background:transparent;
 text-align: center;
 float:left;
}
.Vbtn-3 svg {
 height: 45px;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
.Vbtn-3 rect {
 fill: none;
 stroke: #f2625a;
 stroke-width: 3;
 stroke-dasharray: 422, 0;
 transition: all 450ms linear 0s;
}
.Vbtn-3:hover {
 background: rgba(225, 51, 45, 0);
 font-weight: 900;
 letter-spacing: 1px;
 transition: all 150ms linear 0s;
}
.Vbtn-3:hover rect {
 stroke-width: 5;
 stroke-dasharray: 15, 310;
 stroke-dashoffset: 48;
 -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
 transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

html源码

<a href="#" class="set_1_btn Vbtn-3"> 
 <svg>
 <rect x="0" y="0" fill="none" width="100%" height="100%"></rect>
 </svg> 
 Hover 
</a>

鼠标悬停系列2-4

css源码

.Vbtn-4 {
 letter-spacing: 0;
 transition: all 150ms linear 0s;
 float:left;
}
.Vbtn-4:hover, .Vbtn-4:active {
 letter-spacing: 5px;
 transition: all 150ms linear 0s;
}
.Vbtn-4:after, .Vbtn-4:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border: 1px solid rgba(255, 255, 255, 0);
 bottom: 0px;
 content: " ";
 display: block;
 margin: 0 auto;
 position: relative;
 -webkit-transition: all 280ms ease-in-out;
 transition: all 280ms ease-in-out;
 width: 0;
}
.Vbtn-4:hover:after, .Vbtn-4:hover:before {
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-color: #666;
 -webkit-transition: width 350ms ease-in-out;
 transition: width 350ms ease-in-out;
 width: 70%;
}
.Vbtn-4:hover:before {
 bottom: auto;
 top: 0;
 width: 70%;
}

html源码

<a href="#" class="set_1_btn Vbtn-4">Hover</a>

搬你想搬，盖你所需，码字不易，且行且珍惜！

下一系列预告：


在线咨询
上一篇：「前端」HTML之结构
下一篇：解析关于Tomcat Servlet-request的获取请求参数及几种常用方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 文安县 京口区 策勒县 阳江 张湾区 开原市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服