鼠标放上去出现冒泡显示，鼠标挪开隐藏气泡


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        .ace-thumbnails {

    list-style: none outside none;

    margin: 0;

    padding: 0;

}

.ace-thumbnails > li {

    border: 2px solid #333333;

    display: block;

    float: left;

    margin: 2px;

    overflow: hidden;

    position: relative;

}

.ace-thumbnails > li > *:first-child {

    display: block;

    position: relative;

}

.ace-thumbnails > li .tags {

    background-color: rgba(0, 0, 0, 0);

    border: 0 none;

    bottom: 0;

    direction: rtl;

    display: inline-block;

    height: auto;

    left: 0;

    margin: 0;

    overflow: visible;

    padding: 0;

    position: absolute;

    right: 0;

    vertical-align: inherit;

    width: auto;

}

.ace-thumbnails > li .tags > .label-holder {

    direction: ltr;

    display: table;

    margin: 1px 0 0;

    opacity: 0.92;

    text-align: left;

}

.ace-thumbnails > li .tags > .label-holder:hover {

    opacity: 1;

}

.ace-thumbnails > li > .tools {

    background-color: rgba(0, 0, 0, 0.55);

    bottom: 0;

    left: -30px;

    position: absolute;

    text-align: center;

    top: 0;

    transition: all 0.2s ease 0s;

    vertical-align: middle;

    width: 24px;

}

.ace-thumbnails > li > .tools.tools-right {

    left: auto;

    right: -30px;

}

.ace-thumbnails > li > .tools.tools-bottom {

    bottom: -30px;

    height: 28px;

    left: 0;

    right: 0;

    top: auto;

    width: auto;

}

.ace-thumbnails > li > .tools.tools-top {

    bottom: auto;

    height: 28px;

    left: 0;

    right: 0;

    top: -30px;

    width: auto;

}

.ace-thumbnails > li:hover > .tools {

    left: 0;

}

.ace-thumbnails > li:hover > .tools.tools-bottom {

    bottom: 0;

    top: auto;

}

.ace-thumbnails > li:hover > .tools.tools-top {

    bottom: auto;

    top: 0;

}

.ace-thumbnails > li:hover > .tools.tools-right {

    left: auto;

    right: 0;

}

.ace-thumbnails > li > .tools > a, .ace-thumbnails > li > *:first-child .inner a {

    color: #FFFFFF;

    display: inline-block;

    font-size: 18px;

    font-weight: normal;

    padding: 0 4px;

}

.ace-thumbnails > li > .tools > a:hover, .ace-thumbnails > li > *:first-child .inner a:hover {

    color: #C9E2EA;

    text-decoration: none;

}

.ace-thumbnails > li .tools.tools-bottom > a, .ace-thumbnails > li .tools.tools-top > a {

    display: inline-block;

}

.ace-thumbnails > li > *:first-child > .text {

    background-color: rgba(0, 0, 0, 0.55);

    bottom: 0;

    color: #FFFFFF;

    left: 0;

    opacity: 0;

    position: absolute;

    right: 0;

    text-align: center;

    top: 0;

    transition: all 0.2s ease 0s;

}

.ace-thumbnails > li > *:first-child > .text:before {

    content: "";

    display: inline-block;

    height: 100%;

    margin-right: 0;

    vertical-align: middle;

}

.ace-thumbnails > li > *:first-child > .text > .inner {

    display: inline-block;

    margin: 0;

    max-width: 90%;

    padding: 4px 0;

    vertical-align: middle;

}

.ace-thumbnails > li:hover > *:first-child > .text {

    opacity: 1;

}

    </style>

</head>

<body>

    <ul class="ace-thumbnails">

            <li>

                <a data-rel="colorbox" title="Photo Title" href="assets/images/gallery/image-1.jpg" style="width:50px; height:100px">

                    <img src="assets/images/gallery/thumb-1.jpg" alt="150x150"  >

                    <div class="tags">

                        <span class="label-holder">

                            <span class="label label-info">breakfast</span>

                        </span>


<span class="label-holder">

                            <span class="label label-danger">fruits</span>

                        </span>


<span class="label-holder">

                            <span class="label label-success">toast</span>

                        </span>


<span class="label-holder">

                            <span class="label label-warning arrowed-in">diet</span>

                        </span>

                    </div>

                </a>


<div class="tools">

                    <a href="#">

                        <i class="icon-link">a</i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip">b</i>

                    </a>


<a href="#">

                        <i class="icon-pencil">c</i>

                    </a>


<a href="#">

                        <i class="icon-remove red">d</i>

                    </a>

                </div>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-2.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-2.jpg" alt="150x150">

                    <div class="text">

                        <div class="inner">Sample Caption on Hover</div>

                    </div>

                </a>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-3.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-3.jpg" alt="150x150">

                    <div class="text">

                        <div class="inner">Sample Caption on Hover</div>

                    </div>

                </a>


<div class="tools tools-bottom">

                    <a href="#">

                        <i class="icon-link"></i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip"></i>

                    </a>


<a href="#">

                        <i class="icon-pencil"></i>

                    </a>


<a href="#">

                        <i class="icon-remove red"></i>

                    </a>

                </div>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-4.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-4.jpg" alt="150x150">

                    <div class="tags">

                        <span class="label-holder">

                            <span class="label label-info arrowed">fountain</span>

                        </span>


<span class="label-holder">

                            <span class="label label-danger">recreation</span>

                        </span>

                    </div>

                </a>


<div class="tools tools-top">

                    <a href="#">

                        <i class="icon-link"></i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip"></i>

                    </a>


<a href="#">

                        <i class="icon-pencil"></i>

                    </a>


<a href="#">

                        <i class="icon-remove red"></i>

                    </a>

                </div>

            </li>


<li>

                <div>

                    <img src="assets/images/gallery/thumb-5.jpg" alt="150x150">

                    <div class="text">

                        <div class="inner">

                            <span>Some Title!</span>


<br>

                            <a data-rel="colorbox" href="assets/images/gallery/image-5.jpg" class="cboxElement">

                                <i class="icon-zoom-in"></i>

                            </a>


<a href="#">

                                <i class="icon-user"></i>

                            </a>


<a href="#">

                                <i class="icon-share-alt"></i>

                            </a>

                        </div>

                    </div>

                </div>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-6.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-6.jpg" alt="150x150">

                </a>


<div class="tools tools-right">

                    <a href="#">

                        <i class="icon-link"></i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip"></i>

                    </a>


<a href="#">

                        <i class="icon-pencil"></i>

                    </a>


<a href="#">

                        <i class="icon-remove red"></i>

                    </a>

                </div>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-1.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-1.jpg" alt="150x150">

                </a>


<div class="tools">

                    <a href="#">

                        <i class="icon-link"></i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip"></i>

                    </a>


<a href="#">

                        <i class="icon-pencil"></i>

                    </a>


<a href="#">

                        <i class="icon-remove red"></i>

                    </a>

                </div>

            </li>


<li>

                <a data-rel="colorbox" href="assets/images/gallery/image-2.jpg" class="cboxElement">

                    <img src="assets/images/gallery/thumb-2.jpg" alt="150x150">

                </a>


<div class="tools tools-top">

                    <a href="#">

                        <i class="icon-link"></i>

                    </a>


<a href="#">

                        <i class="icon-paper-clip"></i>

                    </a>


<a href="#">

                        <i class="icon-pencil"></i>

                    </a>


<a href="#">

                        <i class="icon-remove red"></i>

                    </a>

                </div>

            </li>

        </ul>

</body>

</html>

鼠标放上去出现冒泡显示，鼠标挪开隐藏气泡

时间： 2024-10-16 21:11:17

鼠标放上去出现冒泡显示，鼠标挪开隐藏气泡的相关文章

JavaScript基础 鼠标放上触发事件onmouseover 鼠标移开触发事件onmouseout

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css3 实现鼠标放到一个div上显示出另一个隐藏的div

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title>CSS Test Page</title> <style type="text/css"> *{ margin: 0; padding: 0; } .cent{ background:#0CF; height:200p

C# 隐藏、显示鼠标指针

1.添加命名空间 using System.Runtime.InteropServices; 2.添加DLL引用 /// <summary> /// 控制鼠标指针显示和隐藏 /// </summary> public class MousePointer { /// <summary> /// 调用系统API函数操作鼠标指针 /// </summary> /// <param name="status">0表示隐藏鼠标指针,1

python: HTML之 鼠标放上去下拉项字体显示不同颜色

鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .menu:hover { color: red; display: b

技巧三 Chart上曲线的点鼠标放上去显示横纵坐标

技巧三: 在chart的上曲线上的点 鼠标放上去,显示此点的横纵坐标代码如下:procedure TForm1.pntsrsSeries1MouseEnter(Sender: TObject);vari:integer;x1,y1:string;begin pntsrsSeries1.Cursor:=crHandPoint; cht1.showHint:=true; i:=cht1.Series[1].GetCursorValueIndex; x1:=FormatFloat('0.000',ch

鼠标放上超链接显示背景效果

鼠标放上超链接显示背景效果: <html> <head> <style type="text/css"> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150

鼠标放上去，div高度随文字增加，并显示剩余的文字。

/*这里是鼠标放上去显示全名   */    .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#000000; overflow:hidden;}    .kb2wText:hover { width:100%; overflow:visible;height:auto; z-index:99;background-color:#F9F9F9;word-break:break-all;} <di

css特效，鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果 两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

Jquery鼠标放上去显示全名的实现方法

第一种方式 使用mouseover.mouseout事件    // 鼠标滑过显示全名var origin_name;$('.task_name').mouseover(function() {  origin_name = $(this).text();  $(this).text($(this).nextAll("input").val());}).mouseout(function() {  $(this).text(origin_name);}); 第二种方式 使用a标签的ti