Web前端 鼠标控制图片的显隐 代码

最新推荐文章于 2022-05-20 11:45:22 发布
最新推荐文章于 2022-05-20 11:45:22 发布
阅读量415 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44752891/article/details/89435315
版权

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用CSS绘制图形</title>
        <link rel="stylesheet"href="css/new_file.css"type="text/css"/>
    </head>
    <body>
        <div class="box">
            <div class="word">
                <span>名校校徽</br>请勿点击</span>
            </div>
        </div>
    </body>
</html>

img文件

CSS部分

body{
    background: chartreuse;
}
.box{
    width:300px;
    height:300px;
    margin:100px auto;
    background:url(../img/123.png) no-repeat 0 0/cover;
    border-radius:50%;
}
.word{
    display: none;
    width:300px;
    height:185px;
    background:rgba(0,0,0,0,0.5);
    padding-top:120px;
    font-size:20px;
    font-weight:600;
    color:red;
    text-align:center;
    border-radius:50%;
}
.box:hover .word{
    display:block;
}

XTFELY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
43 图片自动显隐效果 图片加速跑 图片折返跑
alovelypeach的博客
05-12 476
1.点击按钮自动切换图片的显隐状态 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ ...
javascript经典特效---图片显隐效果.rar
02-29
图片显隐效果.rar图片显隐效果.rar图片显隐效果.rar图片显隐效果.rar图片显隐效果.rar图片显隐效果.rar
js控制图片显示和隐藏
w2019424的博客
07-19 2694
以下是运行后3秒弹出一个广告，广告出现3秒后关闭的代码，如图：
图片的显示和隐藏
qq_39937301的博客
09-22 608
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } .box1 { width: 100px;
利用jquery实现图片显隐特效
cfw2006的专栏
04-07 752
鼠标悬停到图片上时，图片变得透明的效果，代码如下：利用jquery实现图片显隐特效<!--$(document).ready(function(){ $("img").hover( function(){$(this).fadeTo(slow,0.6);}, function(){$(this).fadeTo(slow,1
易语言源码非API显隐鼠标光标易语言例程.rar
02-23
易语言源码非API显隐鼠标光标易语言例程.rar 易语言源码非API显隐鼠标光标易语言例程.rar 易语言源码非API显隐鼠标光标易语言例程.rar 易语言源码非API显隐鼠标光标易语言例程.rar 易语言源码非API显隐鼠标光标...
图片轮播展示——使用图片显隐控制.htm
04-01
图片轮播展示——使用图片显隐控制.htm
PictureBox和Button重叠，鼠标滑过图片控件控制按钮的显隐，按钮可响应事件
05-25
1. 图片控件和按钮重叠放置 2.通过滑过或离开图片控件范围控制按钮的显隐 3. 按钮可响应事件
易语言非API显隐鼠标光标例程
07-21
易语言非API显隐鼠标光标例程源码,非API显隐鼠标光标例程
鼠标定位即时显隐导航栏的创建.pdf
最新发布
01-02
鼠标定位即时显隐导航栏的创建.pdf
javascript经典特效---图片显隐变幻.rar
01-11
图片显隐变幻.rar图片显隐变幻.rar图片显隐变幻.rar图片显隐变幻.rar图片显隐变幻.rar图片显隐变幻.rar
Web前端前沿技术 ____酷炫的3D特效 鼠标进入图片时，显示文本
04-30
Web前端前沿技术 ____酷炫的3D特效 鼠标进入图片时，显示文本
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
html图片内元素隐藏与显示,HTML元素显示与隐藏
weixin_35723036的博客
06-03 712
在WEB开发中，前台HTML中经常需要控制元素的隐藏与显示，我们最为最常见是二级导航栏(通过鼠标的移动来触发onmouseover，onmouseout事件来实现二级菜单的显示与隐藏)二级菜单的显示与隐藏。然而控制元素的影响与显示有两种方式：1、display :设置如何及是否显示某元素2、visibility :设置元素可见或不可见 Example:HTML元素的显示与隐藏控制#div1,...
WEB的隐藏技能
sdasadasds的博客
05-20 1176
在web网页的开发过程中,大部分的文本,图片或者视频等都是可见的,但是有些相关元素是默认是需要隐藏的,当鼠标悬停上去之后才会显示,比如下面的红色所示部分. 这类的效果在页面中存在的概率特别高,那么想要让一个元素隐藏的实现方案有很多,只是每种不同的实现方法的原理和最终呈现结果的渲染方式是不同的。那总体来看想要实现该隐藏的效果至少有10多种方法，具体如下： 1．设置display的值为none。 2．给对应的元素添加 html的hidden属性。 3．负margin值，数值给用负数，只要数值足够大，就可以让一
web前端中的图片
ES6之super关键字详解
04-28 1003
        开篇语: 在做web前端开发过程中，图片是避开不了的话题，合适的位置放一张合适的图片，胜过很多文字，可以是html便签img，也可以是css背景，还可以是svg生成的image，不同的图片对网站的性能和可访问性有很大的差异。接下来我们一起看一下各种图片的添加方式以及优缺点 1、img标签 &nbsp...
前端总结之图片文字隐藏
SchopenhauerZhang的博客
12-03 3051
图片文字隐藏利用overflow：hidden，使原本在（背景）图片所在的位置的文字被隐藏而只显示图片。text-indent：尽可能大的数值。这样可以实现当页面显示时用户看不见文字而只能看见图片，但是搜索引擎搜索时可以搜索到页面中的文字。因为搜索引擎不知道图片却能识别文字。
浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏
weixin_39810441的博客
06-03 1626
HTML网页图片的切换及隐藏：完成实现效果代码如下：图片切换隐藏下一张隐藏var cbtn = document.getElementById("cbtn");var hbtn = document.getElementById("hbtn");var img = document.getElementById("img");var index = 0;//为元素添加点击触发事件hbtn.addE...
web前端实验一：利用Js捕获鼠标事件实现图片切换
Lon 实验室
04-06 8374
很多时候在做web时，头疼的不是功能的实现，而是前台的界面，下面是介绍关于利用javascript捕获鼠标事件的实验 实验目的：鼠标指向某一图片时，把该图片切换为指定图片，离开时回复原来图片。 实验用途：制作web导航、强调某一功能时非常常用。   直接附上源码，非常简单： 动态切换图片 function changeSrc(obj) { obj.src =
控制primitives显隐
09-10
### 回答1： 可以使用如下方法来控制primitives（原语）的显隐： 1. 在HTML中，可以使用`display`属性控制元素的显示与隐藏。例如，可以使用`display:none`来隐藏元素，使用`display:block`来显示元素。 2. 在JavaScript中，可以使用`element.style.display`属性来控制元素的显示与隐藏。例如，可以使用`element.style.display='none'`来隐藏元素，使用`element.style.display='block'`来显示元素。 3. 在CSS中，可以使用`display`属性来控制元素的显示与隐藏。例如，可以使用`display:none`来隐藏元素，使用`display:block`来显示元素。 4. 在jQuery中，可以使用`hide()`函数来隐藏元素，使用`show()`函数来显示元素。 希望这些方法能帮到你。 ### 回答2： 要控制Primitives的显隐，首先需要明确Primitives是指计算机图形学中的基本几何元素，如点、线、多边形等。在图形学中，通过控制Primitives的显隐可以实现对场景的渲染和展示。 要控制Primitives的显隐，通常需要借助图形学编程语言或图形学软件来实现。下面是一种常见的实现方式： 首先，需要通过编程语言或软件中的接口或函数来创建Primitives对象并设置其属性，包括位置、尺寸、颜色等。然后，根据需要设置Primitives的可见性属性，即显示或隐藏。这通常可以通过设置Primitives对象的可见性标志或选择合适的接口函数实现。 例如，在计算机图形学编程中，可以通过使用OpenGL或DirectX等图形库来控制Primitives的显隐。在OpenGL中，可以通过调用glTranslatef、glRotatef等函数来设置Primitives的位置和变换属性。同时，可以通过 glEnable(GL_DEPTH_TEST)函数来开启深度测试，根据深度值实现Primitives的遮挡和显隐效果。 此外，还可以根据用户的交互来动态地控制Primitives的显隐。例如，在交互式的三维建模软件中，可以通过鼠标点击或拖拽等操作来选择或移动Primitives对象，并通过更新Primitives的可见性属性来实现显隐控制。 总之，控制Primitives的显隐是计算机图形学中的一个重要任务，可以通过编程语言或图形学软件提供的接口或函数来实现。这样就能根据需要设置Primitives的可见性属性，实现对场景的渲染和展示。 ### 回答3： 要控制primitives（基本元素）的显隐性，可以采取几种方法。首先，我们可以使用CSS属性的display来控制元素的可见性。通过将display属性设置为"none"，可以使元素完全隐藏，不占用任何空间。而将display属性设置为"block"或"inline"，则可以使元素显现出来。 其次，我们还可以使用JavaScript来控制primitives的显隐性。通过获取元素的DOM对象，并使用style属性中的display方法，我们可以通过改变display的值来实现元素的显示与隐藏。 另外，还可以借助jQuery库来控制primitives的显隐性。通过使用该库提供的方法如hide()和show()，我们可以实现元素的隐藏和显示。 通过上述方法，我们可以根据需要来控制primitives的显隐性。无论是使用CSS、JavaScript还是jQuery，我们都可以根据具体的情况来选择最适合的方法，以达到我们想要的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值