2. 程式人生 > >CSS3滑鼠放上按鈕懸浮框提示效果

CSS3滑鼠放上按鈕懸浮框提示效果

阿新 • • 發佈：2019-01-22 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            text-align: center;
        }

        p {
            margin
 
: 100px;
        }

        .tip {
            display: inline-block;
            position: relative;
        }

        .tip:before, .tip:after {
            opacity: 0; /*透明度為完全透明*/
            position: absolute;
            z-index: 1000; /*設為最上層*/
            /*滑鼠放上元素上時的動畫，滑鼠放上後效果在.tip-*:hover:before, .tip-*:hover:after中設定;
            0.3s:規定完成過渡效果需要多少秒或毫秒,ease:規定慢速開始，然後變快，然後慢速結束的過渡效果*/
 

            transition: 0.3s ease;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
        }

        .tip:before {
            content: '';
            border: 6px solid transparent;
        }

        .tip:after {
            content: attr(data-tip); /*後去要提示的文字*/
            padding
 
: 5px;
            white-space: nowrap; /*強制不換行*/
            background-color: #000000;
            color: #ffffff;
        }

        .tip:hover:before, .tip:hover:after {
            opacity: 1; /*滑鼠放上時透明度為完全顯示*/
            z-index: 1000;
        }

        /*top*/
        .tip-top:before {
            bottom: 100%;
            left: 50%;
            border-top-color: rgba(0, 0, 0, 0.8); /*小三角效果*/
            margin-left: -3px;
            margin-bottom: -12px;
        }

        .tip-top:after {
            bottom: 100%;
            left: 50%;
            margin-left: -6px;
        }

        .tip-top:hover:before {
            margin-bottom: -6px;
        }

        .tip-top:hover:after {
            margin-bottom: 6px;
        }

        /*bottom*/
        .tip-bottom:before {
            top: 100%;
            left: 50%;
            border-bottom-color: rgba(0, 0, 0, 0.8);
            margin-left: -3px;
            margin-top: -9px;
        }

        .tip-bottom:after {
            top: 100%;
            left: 50%;
            margin-left: -6px;
            margin-top: 3px;
        }

        .tip-bottom:hover:before {
            margin-top: -3px;
        }

        .tip-bottom:hover:after {
            margin-top: 9px;
        }

        /*right*/
        .tip-right:before {
            top: 50%;
            left: 100%;
            border-right-color: rgba(0, 0, 0, 0.8);
            margin-left: -9px;
            margin-top: -3px;
        }

        .tip-right:after {
            top: 50%;
            left: 100%;
            margin-left: 3px;
            margin-top: -6px;
        }

        .tip-right:hover:before {
            margin-left: -3px;
        }

        .tip-right:hover:after {
            margin-left: 9px;
        }

        /*left*/
        .tip-left:before {
            top: 50%;
            left: 0%;
            border-left-color: rgba(0, 0, 0, 0.8);
            margin-left: 0px;
            margin-top: -3px;
        }

        .tip-left:after {
            top: 50%;
            right: 100%;
            margin-right: 0px;
            margin-top: -6px;
        }

        .tip-left:hover:before {
            margin-left: -6px;
        }

        .tip-left:hover:after {
            margin-right: 6px;
        }
    </style>
</head>
<body>
<p>
    <button class="tip tip-top" data-tip="我是上邊提示">上邊提示</button>
</p>
<p>
    <button class="tip tip-bottom" data-tip="我是下邊提示">下邊提示</button>
</p>
<p>
    <button class="tip tip-right" data-tip="我是右邊提示">右邊提示</button>
</p>
<p>
    <button class="tip tip-left" data-tip="我是左邊提示">左邊提示</button>
</p>
</body>
</html>

相關推薦

CSS3滑鼠放上按鈕懸浮框提示效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" c

資料列表一列擷取前十位加...滑鼠放上顯示全部

<div class="table-container"> <asp:Repeater ID="rptList" runat="server"> <HeaderTemplat

swiper滑鼠放上停止輪播事件

var mySwiper = new Swiper('.swiper-container', { spaceBetween: 30, centeredSlides: true, loop: true, //迴圈播放 autoplay: { //播放

unity--滑鼠放上顯示物體資訊和物體高光效果

滑鼠放在物體上顯示資訊程式碼 using UnityEngine; using System.Collections; public class info : MonoBehaviour { bool isShowInfo; public GUISty

學習筆記3--CSS製作滑鼠放上後淡入透明遮罩層效果

transition： Internet Explorer 10、Firefox、Opera 和 Chrome 支援 transition 屬性。 Safari 支援替代的 -webkit

css3實現 滑鼠移上圖片 放大遮罩效果

最近學習了一些關於HTML5和CSS3方面的知識，通過一些小例子鞏固一下，拓展自己知識面。小例子使用CSS3實現 當滑鼠滑到圖片上，會出現 放大、遮罩的效果。請看下面截圖，PS：原始碼下載見下面網址，另

滑鼠放上圖片，圖片上方出現遮罩和文字效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" c

原生AJAX+jsp+servlet實現百度搜索框提示效果

我們這裡使用HTML5的新特性datalist實現輸入框的自動下拉提示，用datalist通過id與input關聯起來，在搜尋時就會出現下拉框。下面是HTML程式碼。 　　<!-- 輸入框 --> <input type="text" size="50" id="sear

jQuery實現滑鼠移上彈出提示框，移出消失

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

滑鼠放到控制元件上 DIV懸浮提示效果(四種)

<html> <head> <title>影象效果演示</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> &l

用Anko和Kotlin實現Android上的對話框和警告提示（KAD 24）

posit eve linear 免費 clas testing size uil 如何 作者：Antonio Leiva 時間：Mar 9, 2017 原文鏈接：https://antonioleiva.com/dialogs-android-anko-kotlin/

滑鼠放圖片上==放大鏡顯示效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery-圖片的放大鏡顯示效果</title> <style

關於CMFCToolBar上各個按鈕的Prompt提示訊息

    先來看圖     對於兩個下拉框（紅色框內）和 按鈕右側有三角符號（橢圓內）我是通過CMFCToolBar::ReplaceButton()方式設定上去的: mToolBar2_.ReplaceButton(ID_BAR

css實現滑鼠懸浮後的提示效果

一、概述  很多時候網站中需要在滑鼠劃過小圖示時，懸浮出提示性的文字。比如下圖： 滑鼠懸浮後的效果       這種效果可以使用css中的偽類hover來實現。但有時候搞不清兩個元素的巢狀關係。使用了hover卻沒有效果。本人剛開始使用的時候也踩了這個坑。

intellij idea 滑鼠放上去提示引數等資訊

settings-->Editor-->General，在other中找到show quick documentation on mouse move, 或者開啟settings，直接輸入mouse move搜尋，如下圖： 在other中找到show quick document

文字框裡如何帶上圖示和文字提示

這裡是一個輸入框，裡面有提示文字的同時，還有一個小圖示。這裡我的做法是使用一個父元素包裹住文字框，利用父級元素的背景圖片來完成小圖示的實現。提示文字部分則使用文字框的placeholder來解決。 參考程式碼如下： HTML部分： <div class="

Python3 tkinter 使用圖片作為背景，並在該背景上加輸入框，按鈕

  最近用到了tkinter，想用自己喜歡的圖片作為背景，看了不少部落格，可能是我少敲了什麼，很少有能成功執行的，最後終於發現了一個可行方案，於是在這裡記錄一下（程式碼為原創） 圖片使用的p站喜愛畫師的作品（因為是以前儲存的，抱歉沒找到畫師連結），侵刪。 import tk

HTML中 設定文字域的顏色、按鈕顏色、文字框提示內容

今天用HTML做了一個新增收貨地址的網頁介面，將大部分人遇到的攔路虎解決了一下 1.如何設定文字域背景顏色    在<textarea></textarea>標籤中新增屬性style=background:#E6E6E6，即可設定為灰色。 2.

WPF 平板上按鈕點選不觸發，滑鼠點選觸發的兩種解決方法

原文: WPF 平板上按鈕點選不觸發，滑鼠點選觸發的兩種解決方法 今天執行在windows平板上的程式，有個功能是彈出子窗體，點彈出窗體的關閉按鈕，要點好幾次才能觸發。網上找了找，也有人與我類似的情形。 解決方法如下： public static void DisableWPFTabletSupp

如何實現滑鼠移動按鈕上，按鈕變顏色的效果

可以通過js來改變滑鼠放在按鈕上的樣式： 這是按鈕的預設狀態： <button id='btn' class=" btn btn-block btn-default">提交<