下面是样式:(1.这里千万要注意一点就是样式与样式之间不能有;号,不然;号后面的样式执行不到 2.z-index越大越在前面 3.要使用z-index定位的元素中必须有position为absolute 4.还有一点就是.qie:hover .showWords{xxxx}这个showWord的class必须在 .qie元素里面才能被拿到,这是一个筛选)
<style type="text/css"> .showWords{ display:none; border-radius: 5px; width:188px; font-size:14; color:yellow; z-index:2; text-align:left; margin-top: -230px; margin-left: 4px; padding-bottom: 12px; padding-right: 12px; padding-left:20px; padding-top:16px; background-color: blue; background-color: #c16; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .qie:hover{ cursor:pointer; } .qie:hover .showWords{ display:block; border-radius: 5px; z-index:2; } </style>
这里是html中代码:
<div class="qie" style="width: 200px;box-shadow: 0px 0px 5px #eee;"> <img src="resources/template/${template.path}-index.jpg" style="width:100%;" /> <!-- 这是要显示的内容:这个position:absolute是必须要的,他与z-index结合使用 --> <div class="showWords" style="position:absolute;border: solid 1px #ff7400;"> <c:forEach items="${template.showWords}" var="showWord"> <p style="margin:0px;">${showWord}</p> </c:forEach> </div> </div>
相关推荐
层叠样式,将一个div覆盖到另一个div上
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
jquery/js实现鼠标点击一个div,另一个div变色demo
点击文字弹出一个DIV层窗口代码,下载就能用
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
鼠标移动到div上弹出div或者信息,并且自适应显示位置;每一步代码都有详细的解释;简单,通俗易懂
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
DIV层上下移动
多个iframe,其中一个frame中的隐藏div能够在最上层显示,不会挡着这个div
两个DIV同一行显示。也可以调整样式使其纵向排列。
点击按钮(a标签)隐藏显示div内容,切换div内容
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的知识,自己摸索哦。终于成功了,O(∩_∩)O~ 分享出来。...
多个iframe,显示其中一个frame中的div,并处于最上层显示 并且页面中的填写的值,可以传到弹出的div页面中 最近一段时间在做这个东西,给大家分享一下 附带测试代码 js弹出div层
项目中一个gridview,点击一行弹出一个div层,把该条的信息都显示在层中,然后点击保存,更新gridview
拖动div,然后在另一个div显示被拖进div的id.
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
vue项目中在可编辑div光标位置插入内容 html: <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...
js鼠标浮动显示div,在鼠标移动至input后可显示div层中的内容
非常清爽的div层,漂亮div层 精美div层