如何鼠标悬浮显示隐藏图片

原创 2018年04月17日 10:23:03
<a class="show_img" href="file.xlsx">EXCEL模板</a>
<div class="hide_img"><img src="img/imgShow.png"></div>
.hide_img{ display:none; z-index:9999; position:absolute;}
.show_img:hover +.hide_img{ display:block} 

上面代码很好理解,但是我想再分享一下css选择器,我在编码过程中就忘记了,css选择器的强大的作用。

代码中涉及到相邻兄弟选择器,因此在这里想记录一下。

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

在hover后面增加兄弟选择器+,才能让img显示。


VC++Windows多线程实战图片编辑器

随着CPU的多核心的发展,不管是在哪个平台,多线程的编程已经是我们工程师必须掌握的技能,我们都知道单线程编程只能利用到cpu的一个核心,对于cpu性能有极大的浪费,并且在界面编程中对于给用户反馈都必须有及时性,如果一个操作等半天没有任何响应,知道结束才告知用,那这样的用户体验是极差的,所以也必须要用到多线程编程。
  • 2017年01月05日 16:54

鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

html的示例代码: css代码:.element{ display:none; //元素默认是隐藏的 }//当鼠标经过兄弟元素brother-showin...
  • phoooob
  • phoooob
  • 2016-06-02 12:18:15
  • 13829

鼠标悬浮移出控制div的显示与隐藏

鼠标悬浮移出控制div的显示与隐藏   当鼠标悬浮在某一个触发div显示的元素上时,通常JS为:onmouseover="javascript:showAlertInfo(ShowID);"当鼠标从d...
  • seven_zhao
  • seven_zhao
  • 2011-06-17 15:48:00
  • 12387

鼠标悬浮 实现隐藏div 提示

1、位置相对         function show(obj,id) {    var objDiv = $("#"+id+"");    $(objDiv).css("disp...
  • mobingdetong
  • mobingdetong
  • 2015-07-09 08:36:30
  • 3894

html 鼠标悬浮,显示隐藏的文字

一般表格里面的宽度需要固定一下,但这样有些很长的文字就会要用...来隐藏,现在要做到鼠标放上去,显示全部内容,其实方法很简单:     最简单的做法,给标签增加title属性,并赋上要显示的内容。也...
  • omayyouhappy
  • omayyouhappy
  • 2017-11-21 14:28:17
  • 663

css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。

css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分想上显示出来。 不用js操作,纯css就可以。...
  • qq_33442546
  • qq_33442546
  • 2016-09-20 18:04:48
  • 2264

html+css鼠标悬浮显示图片

初学html,在这里留下足迹。如有谬误,请多指教。 主要步骤:1、将对应的大图小图存放在同一个li标签中(鼠标悬浮到小图时,方便定位到大图)。 2、内部样式中利用...
  • qingbaicai
  • qingbaicai
  • 2016-08-13 17:31:04
  • 13326

js中鼠标悬浮改变图片或内容

1.改变图片**css样式** *{ margin: 0; padding: 0; } li{ list-style: none; } #all ul li{ floa...
  • doaram123
  • doaram123
  • 2017-05-16 11:48:15
  • 530

Vue.js鼠标悬浮更换图片

Vue鼠标悬浮更换图片最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片,大致实现出来的效果就是这样: 这个在jQuery中是个很简单的事,但是在vue中我还是第一次实现。首先将所有的选中后图...
  • HaiJing1995
  • HaiJing1995
  • 2017-05-17 12:12:58
  • 1760

css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...
  • u010394015
  • u010394015
  • 2016-07-15 15:05:08
  • 12205
收藏助手
不良信息举报
您举报文章:如何鼠标悬浮显示隐藏图片
举报原因:
原因补充:

(最多只允许输入30个字)