6中鼠标移入显示遮罩层效果

最新推荐文章于 2023-11-06 17:19:32 发布
最新推荐文章于 2023-11-06 17:19:32 发布
阅读量157 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/clweb/p/6861385.html
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>遮罩效果</title>
    <style>
　　　　


@charset "utf-8";
*{padding: 0; margin: 0;}
img{border: none;}
ol,ul,li{list-style: none;}
a{text-decoration: none;}
body{ font-family: "寰蒋闆呴粦";}

/*----------- 閬僵鍐呭鍖� 寮€濮�------------------------------------*/
/*----------- 浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉 寮€濮�---------------------------*/

.content{
    width:1200px;
    height: 428px;
    margin:20px auto;
    padding: 15px 25px 15px 25px;
}
.con{
    width: 270px;
    height: 200px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
}
.con img{
    width:270px;
    height: 200px;
}
.txt{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.txt h3{
    font-weight: normal;
}
.txt p{
    font-size: 14px;
    display: block;
    line-height: 20px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -moz-margin-before: 1em;
    -moz-margin-after: 1em;
    -moz-margin-start: 0px;
    -moz-margin-end: 0px;
}
/*------------- 浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉 缁撴潫 ------------------------------*/
/*------------- 鐩存帴鏄剧ず閬僵鏁堟灉 寮€濮� ------------------------------*/
.content-two{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-two{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
}
.con-two img{
    width:297px;
    height: 198px;
}
.txt-two{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    display: none;
}
.txt-two h3{
    font-weight: normal;
}
.txt-two p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 鐩存帴鏄剧ず閬僵鏁堟灉 缁撴潫------------------------------*/
/*------------- 浠庡乏涓婇儴鏄剧ず閬僵鏁堟灉  寮€濮�----------------------------*/
.content-three{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-three{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.con-three img{
    width:297px;
    height: 198px;
}
.txt-three{
    position: absolute;
    left: -297px;
    top: -198px;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    filter:Alpha(opacity=80);
}
.txt-three h3{
    font-weight: normal;
}
.txt-three p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 浠庡乏涓婇儴鏄剧ず閬僵鏁堟灉  缁撴潫----------------------------*/
/*------------- 浠庡乏渚ф樉绀洪伄缃╂晥鏋� 寮€濮� ------------------------------*/
.content-four{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-four{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.con-four img{
    width:297px;
    height: 198px;
}
.txt-four{
    position: absolute;
    left: -297px;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    /*display: none;*/
}
.txt-four h3{
    font-weight: normal;
}
.txt-four p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 浠庡乏渚ф樉绀洪伄缃╂晥鏋� 缁撴潫------------------------------*/
/*------------- 鍥剧墖鏀惧ぇ鏁堟灉 寮€濮� ------------------------------*/
.content-five{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-five{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

}
.conimg{
    width: 297px;
    height: 198px;
}
.txt-five{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.txt-five h3{
    font-weight: normal;
}
/*------------- 鍥剧墖鏀惧ぇ鏁堟灉 缁撴潫------------------------------*/
/*------------- 鍥剧墖鏀惧ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 寮€濮� ------------------------------*/
.content-six{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-six{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.conimg-two{
    width: 297px;
    height: 198px;
}
.txt-six{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.2);
    display: none;
}
.txt-six h3{
    font-weight: normal;
}
.txt-six p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 鍥剧墖鏀惧ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 缁撴潫------------------------------*/
/*------------- 閬僵鍐呭鍖� 缁撴潫--------------------------------------*/

　　</style>
</head>

<body>
<!--从底部上升的遮罩效果  开始-->
<h2 class="content-title">一、从底部上升的遮罩效果</h2>
<div class="content">
    <ul class="contentbox">
        <li class="con">
            <img src="images/class1.jpg" alt="con1"/>
            <div class="txt">
                <h3>图片一</h3>
                <p>内容一内容一内容一内容一内容一内容一</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class2.jpg" />
            <div class="txt">
                <h3>图片二</h3>
                <p>内容二内容二内容二内容二内容二内容二</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class3.jpg"/>
            <div class="txt">
                <h3>图片三</h3>
                <p>内容三内容三内容三内容三内容三内容三</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class4.jpg"/>
            <div class="txt">
                <h3>图片四</h3>
                <p>内容四内容四内容四内容四内容四内容四</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class5.jpg"/>
            <div class="txt">
                <h3>图片五</h3>
                <p>内容五内容五内容五内容五内容五内容五</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class6.jpg"/>
            <div class="txt">
                <h3>图片六</h3>
                <p>内容六内容六内容六内容六内容六内容六</p>
            </div>
        </li>
    </ul>
</div>
<!--从底部上升的遮罩效果  结束-->
<!--直接显示遮罩效果  开始-->
<h2 class="content-title">二、直接显示遮罩效果</h2>
<div class="content-two">
    <ul class="contentbox-two">
        <li class="con-two">
            <img src="images/class1.jpg"/>
            <div class="txt-two">
                <h3>图片一</h3>
                <p>内容一内容一内容一内容一内容一内容一</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class2.jpg"/>
            <div class="txt-two">
                <h3>图片二</h3>
                <p>内容二内容二内容二内容二内容二内容二</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class3.jpg"/>
            <div class="txt-two">
                <h3>图片三</h3>
                <p>内容三内容三内容三内容三内容三内容三</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class4.jpg"/>
            <div class="txt-two">
                <h3>图片四</h3>
                <p>内容四内容四内容四内容四内容四内容四</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class5.jpg"/>
            <div class="txt-two">
                <h3>图片五</h3>
                <p>内容五内容五内容五内容五内容五内容五</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class6.jpg"/>
            <div class="txt-two">
                <h3>图片六</h3>
                <p>内容六内容六内容六内容六内容六内容六</p>
            </div>
        </li>
    </ul>
</div>
<!--直接显示遮罩效果  结束-->
<!--从左上部显示遮罩效果  开始-->
<h2 class="content-title">三、从侧部显示遮罩效果</h2>
<div class="content-three">
    <ul class="contentbox-three">
        <li class="con-three">
            <img src="images/class1.jpg"/>
            <div class="txt-three">
                <h3>图片一</h3>
                <p>内容一内容一内容一内容一内容一内容一</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class2.jpg"/>
            <div class="txt-three">
                <h3>图片二</h3>
                <p>内容二内容二内容二内容二内容二内容二</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class3.jpg"/>
            <div class="txt-three">
                <h3>图片三</h3>
                <p>内容三内容三内容三内容三内容三内容三</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class4.jpg"/>
            <div class="txt-three">
                <h3>图片四</h3>
                <p>内容四内容四内容四内容四内容四内容四</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class5.jpg"/>
            <div class="txt-three">
                <h3>图片五</h3>
                <p>内容五内容五内容五内容五内容五内容五</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class6.jpg"/>
            <div class="txt-three">
                <h3>图片六</h3>
                <p>内容六内容六内容六内容六内容六内容六</p>
            </div>
        </li>
    </ul>
</div>
<!--从左上部显示遮罩效果  结束-->
<!--从左侧显示遮罩效果  开始-->
<h2 class="content-title">四、从左侧滑入显示遮罩效果</h2>
<div class="content-four">
    <ul class="contentbox-four">
        <li class="con-four">
            <img src="images/class1.jpg"/>
            <div class="txt-four">
                <h3>图片一</h3>
                <p>内容一内容一内容一内容一内容一内容一</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class2.jpg"/>
            <div class="txt-four">
                <h3>图片二</h3>
                <p>内容二内容二内容二内容二内容二内容二</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class3.jpg"/>
            <div class="txt-four">
                <h3>图片三</h3>
                <p>内容三内容三内容三内容三内容三内容三</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class4.jpg"/>
            <div class="txt-four">
                <h3>图片四</h3>
                <p>内容四内容四内容四内容四内容四内容四</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class5.jpg"/>
            <div class="txt-four">
                <h3>图片五</h3>
                <p>内容五内容五内容五内容五内容五内容五</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class6.jpg"/>
            <div class="txt-four">
                <h3>图片六</h3>
                <p>内容六内容六内容六内容六内容六内容六</p>
            </div>
        </li>
    </ul>
</div>
<!--从左侧显示遮罩效果  结束-->
<!--图片放大效果  开始-->
<h2 class="content-title">五、鼠标滑过图片放大效果</h2>
<div class="content-five">
    <ul class="contentbox-five">
        <li class="con-five">
            <img class="conimg" src="images/class1.jpg"/>
            <div class="txt-five">
                <h3>图片一</h3>
                <!--<p>为您铺就成为IT大神的在线学习之路</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class2.jpg"/>
            <div class="txt-five">
                <h3>图片二</h3>
                <!--<p>英语、韩语、日语各类语言课程一网打尽</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class3.jpg"/>
            <div class="txt-five">
                <h3>图片三</h3>
                <!--<p>传授会计师、建筑师等各类考证学习宝典</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class4.jpg"/>
            <div class="txt-five">
                <h3>图片四</h3>
                <!--<p>小学、初中、高中各科课程在线辅导</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class5.jpg"/>
            <div class="txt-five">
                <h3>图片五</h3>
                <!--<p>吉他、摄影等各类型区教程让你成为生活达人</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class6.jpg"/>
            <div class="txt-five">
                <h3>图片六</h3>
                <!--<p>教你如何和宝宝一起成长</p>-->
            </div>
        </li>
    </ul>
</div>
<!--图片放大效果  结束-->
<!--图片放大效果伴随蒙版文字出现  开始-->
<h2 class="content-title">六、图片放大效果伴随蒙版文字出现效果</h2>
<div class="content-six">
    <ul class="contentbox-six">
        <li class="con-six">
            <img class="conimg-two" src="images/class1.jpg"/>
            <div class="txt-six">
                <h3>图片一</h3>
                <!--<p>为您铺就成为IT大神的在线学习之路</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class2.jpg"/>
            <div class="txt-six">
                <h3>图片二</h3>
                <!--<p>英语、韩语、日语各类语言课程一网打尽</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class3.jpg"/>
            <div class="txt-six">
                <h3>图片三</h3>
                <!--<p>传授会计师、建筑师等各类考证学习宝典</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class4.jpg"/>
            <div class="txt-six">
                <h3>图片四</h3>
                <!--<p>小学、初中、高中各科课程在线辅导</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class5.jpg"/>
            <div class="txt-six">
                <h3>图片五</h3>
                <!--<p>吉他、摄影等各类型区教程让你成为生活达人</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class6.jpg"/>
            <div class="txt-six">
                <h3>图片六</h3>
                <!--<p>教你如何和宝宝一起成长</p>-->
            </div>
        </li>
    </ul>
</div>
<!--图片放大效果伴随蒙版文字出现  结束-->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
　　
$(function(){
    //浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉寮€濮�
    $(".con").hover(function(){
        $(this).find(".txt").stop().animate({height:"198px"},200);
        $(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);
    },function(){
        $(this).find(".txt").stop().animate({height:"45px"},200);
        $(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
    })
    //浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉缁撴潫
    //鐩存帴鏄剧ず閬僵鏁堟灉寮€濮�
    $(".con-two").hover(function(){
        $(this).find(".txt-two").css("display","block");
    },function(){
        $(this).find(".txt-two").css("display","none");
    })
    //鐩存帴鏄剧ず閬僵鏁堟灉缁撴潫
    //浠庡乏涓婇儴鏄剧ず閬僵鏁堟灉 寮€濮�
    $(".con-three").hover(function() {
        $(this).find(".txt-three").stop().animate({"left": 0,"top":0});
    }, function() {
        $(this).find(".txt-three").stop().animate({"left":-297,"top":-198});
    })
    //浠庡乏涓婇儴鏄剧ず閬僵鏁堟灉 缁撴潫
    //浠庡乏渚ф樉绀洪伄缃╂晥鏋� 寮€濮�
    $(".con-four").hover(function() {
        $(this).find(".txt-four").stop().animate({"left": 0});
    }, function() {
        $(this).find(".txt-four").stop().animate({"left":-297});
    })
    //浠庡乏渚ф樉绀洪伄缃╂晥鏋� 缁撴潫
    //鍥剧墖鏀惧ぇ鏁堟灉 寮€濮�
    $(".con-five").hover(function() {
        $(this).find(".conimg").stop().animate({"width":310,"height":210});
    }, function() {
        $(this).find(".conimg").stop().animate({"width":297,"height":198});
    })
    //鍥剧墖鏀惧ぇ鏁堟灉 缁撴潫
    //鍥剧墖鏀惧ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 寮€濮�
    $(".con-six").hover(function() {
        $(this).find(".conimg-two").stop().animate({"width":310,"height":210});
        $(this).find(".txt-six").css("display","block");
    }, function() {
        $(this).find(".conimg-two").stop().animate({"width":297,"height":198});
        $(this).find(".txt-six").css("display","none");
    })
    //鍥剧墖鏀惧ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 缁撴潫
});

</script>
</body>
</html>

转载于:https://www.cnblogs.com/clweb/p/6861385.html

weixin_30886233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现鼠标移入图片，增加遮罩并在上方显示另一个图片
qq_41681965的博客
01-30 3031
问题来源 最近做web项目，前端表单添加用户头像时遇到的问题，就是鼠标移入添加图片的按钮要有相应的动态效果，具体要求如图 #鼠标未移入效果 #鼠标移入效果 问题解决方式 不想让js代码太过繁多，只用css实现这个效果。具体操作如下： #html的代码 <body> <div class="addLogo"> <img src="images/logo.pn...
鼠标移入显示遮罩层
weixin_44509418的博客
10-05 1960
css鼠标移入元素在上方显示遮罩层到底是怎么做的呢？今天就由我来为大家解答这个问题，在这里我用两种方法来写一下，有需要的小伙伴记得收藏，以备不时之需… 第一种方法： 第一种方法就是给需要遮罩层的元素同级再添加一个元素来达到这样的效果，让我们看一下代码怎么写： html代码： <div class="box"> <a href="http://materials.windfish.cn/jxy1-video.mp4" target="_blank">
#css# 【四】实现鼠标移入图片显示遮罩层
ZHENGCHUNJUN的博客
07-08 1776
css 实现鼠标移入图片显示遮罩层
CSS实现鼠标移至图片上显示遮罩层及文字效果
最新发布
蓝胖子的博客
11-06 1878
CSS实现鼠标移至图片上显示遮罩层及文字效果
html5 图片 遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效
weixin_35084134的博客
05-30 650
InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不同的鼠标滑过图片效果，分为滑动、旋转和翻转3大类。它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作。使用方法使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.c...
随鼠标的移入方向移入的遮罩层
06-29
在这个项目中，jQuery用于监听鼠标移入事件，触发遮罩层的显示，并可能配合CSS3来实现更复杂的动画效果。 3. **鼠标事件**：jQuery提供了丰富的事件处理功能，如`mouseenter`和`mouseleave`事件，它们分别在鼠标...
jQuery鼠标划入出现遮罩层动画.rar
03-26
本项目“jQuery鼠标划入出现遮罩层动画”专注于利用jQuery实现一种交互式用户体验，即当鼠标指针滑过某个元素时，会动态显示一个遮罩层。这种效果常见于网站中的图片展示、模态窗口或提示信息，能够吸引用户的注意力...
js实现鼠标移动到图片产生遮罩效果
10-19
在网页设计中，有时我们需要为用户提供更丰富的交互体验，例如当鼠标悬停在图片上时显示遮罩层，提供更多信息或者操作选项。本教程将详细讲解如何使用JavaScript（js）来实现这一效果。 首先，我们要了解遮罩层...
CSS3实现 鼠标移上图片 放大遮罩效果
05-09
例子比较简单，主要实现：鼠标滑过图片，图片实现渐大效果，个人感觉比较酷炫一些。用户可以根据自己的喜好，修改图片背景等在以后的开发中灵活运用这一特性。另外代码中附有一些注释，还可以帮助一些初学者理解其中...
jQuery鼠标感知方向遮罩代码
06-24
"移入移出"的效果则是利用jQuery的`.fadeIn()`和`.fadeOut()`或`.show()`和`.hide()`方法来控制元素的可见性。这些方法可以添加平滑的过渡效果，增强视觉体验。 对于"jQuery鼠标感知方向遮罩代码"，其工作原理可能...
小白之鼠标移入--图片遮罩显示
weixin_30301449的博客
08-03 189
小白之鼠标移入--图片遮罩显示 效果：当鼠标移入图片时，图片被一块半透明黑色块遮住，并显示色块上按钮或文本。 原理：1.将图片位置创建<div>，固定宽高，绝对定位，并添加溢出隐藏。 　　　 2.添加两个<div>，第一个<div>用来装图片 　　　 3.第二个<div>添加半透明黑色背景，相对定位，并设置宽高。 　　　4.添加...
制作遮罩层(鼠标移入遮罩层出现，移除隐藏)
zhanghl150426的博客
08-28 1792
//由中间向周围渐渐出现 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;transition由小变大&lt;/title&gt;     &lt;style&gt;         *{p
CSS第六天学习总结—— 案例：鼠标经过显示遮罩层
weixin_52819925的博客
07-31 457
案例：鼠标经过显示遮罩层 核心原理： 原先半透明的黑色遮罩看不见， 鼠标经过 大盒子，就显示出来。 遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。 代码参考： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
三十一、综合案例—土豆网鼠标经过显示遮罩
付之一笑的专栏
01-05 296
案例：土豆网鼠标经过显示遮罩 练习元素的显示与隐藏 练习元素的定位 核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。 遮罩的盒子不占有位置，就需要用绝对定位和display配合使用。 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
css 实现鼠标移入图片显示遮罩层
悟世君子的博客
12-20 3105
css 实现鼠标移入图片显示遮罩层 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .image-div { width: 300px; height: 300px; position: relative; } .image-div i..
实现鼠标移入后显示遮罩和图标
qq_42919799的博客
11-03 982
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tudo { .
css-实现鼠标移至图片上显示遮罩层
热门推荐
Asuna的博客
05-09 1万+
1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 &lt;div class="img_div"&gt; &lt;img src="./images/paella-dish.jpg"&gt; &lt;a href="#"&gt; &lt;div class="mask"&gt;
html5鼠标悬停遮罩,js实现鼠标移动到图片产生遮罩效果
weixin_26812607的博客
05-30 498
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码，供大家参考，具体内容如下mask.pic{width:300px;height:250px;background:url(icon/product1.jpg) no-repeat;margin:40px auto;}#mask{width:300px;height:250px;background-color: gray;margi...
css如何实现鼠标移至图片上显示遮罩层及文字
Amanda_wmy的博客
04-23 1万+
css如何实现鼠标移至图片上显示遮罩层及文字 问题：一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字 html: &lt;div class="contentimg"&gt; &lt;span class="img_content"&gt; &lt;a href="http://www.eltran.cc/" target="view_frame&quot
vue鼠标移入显示遮罩层
04-27
在 Vue 中，可以通过绑定 mouseenter 和 mouseleave 事件来实现鼠标移入显示遮罩层的效果。具体实现步骤如下： 1. 在模板中定义一个父容器和一个子容器，并为它们设置好样式和位置。 2. 使用 v-if 或 v-show 指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值