Question

HTML

<div id="aux_center_pnav" style="">
    <ul style="margin-top:2%;overflow: hidden;">
       <li class="DFSPLi aux_center_pnavli fl">高品性理念></li>
       <li class="DFSPLi aux_center_pnavli fl">规律治疗</li>
       <li class="DFSPLi aux_center_pnavli fl">ED与慢性疾病</li>
    </ul>
</div>

CSS

.aux_center_pnavli{
    padding: 2% 10.3%;
    background:#f5f5f7;
}
#aux_center_pnav li:hover{
/*background-color:#c4a2e7;*/
background:url("http://www.permits.performance.gov/sites/all/themes/permits/images/arrow.png") no-repeat scroll 0 0 #c4a2e7;
color:white;
    background-position: left 300px top 35px;
}

这是我的jsfiddle链接：http://jsfiddle.net/tAqd3/1/

当鼠标悬停时，将显示箭头。但我需要它在div下面。提前谢谢。

Answer 1

删除ul中隐藏的溢出，也应该将style属性重构为外部css文件

<div id="aux_center_pnav">
  <ul>
    <li class="DFSPLi aux_center_pnavli fl">高品性理念></li>
    <li class="DFSPLi aux_center_pnavli fl">规律治疗</li>
    <li class="DFSPLi aux_center_pnavli fl">ED与慢性疾病</li>
  </ul>
</div>

制作李的亲戚，然后绝对定位箭头。

.aux_center_pnavli {
  padding: 2% 10.3%;
  background: #f5f5f7;
  position: relative;
}

#aux_center_pnav li:hover {
  color: #fff;
  background: no-repeat scroll 0 0 #c4a2e7;
}

#aux_center_pnav li:hover:after {
  content: url("http://www.permits.performance.gov/sites/all/themes/permits/images/arrow.png");
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -8px; //half the width of the arrow to center it
}

当悬停发生时如何在div下面给出箭头图像？

1 个答案: