下面是样式:(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>