悬停div时显示ul:after

时间:2016-09-28 08:02:47

标签: css hover block display

我将鼠标悬停在ul生成的箭头上时显示div:after。我该如何实现呢?



.select-wrapper {
  position: relative;
  width: 250px;
  -webkit-box-sizing: border-box;
}
.select-wrapper:after {
  content: "\25BC";
  display: block;
}

<div class="select-wrapper">
  <span>Select an option</span>
  <ul>
    <li>Item-1</li>
    <li>Item-2</li>
  </ul>
</div>
&#13;
&#13;
&#13;

当鼠标悬停在箭头上方时,我想显示这些项目。

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

IMO不可能使用伪类:after。要么为箭头创建一个额外的元素,要么只使用wohle select元素。

.select-wrapper {
    position: relative;
    width: 250px;
    -webkit-box-sizing: border-box;
}
.select-wrapper:after {
    content: "\25BC";
    display: block;
    position: absolute;
    left: 0;
    top: 20px;
}
.select-wrapper ul {
  display: none;
}
.select-wrapper:hover ul {
  display: block;
}
<div class="select-wrapper">
  <span>Select an option</span>
  <ul>
    <li>Item-1</li>
    <li>Item-2</li>
  </ul>
</div>

更新:精确定位箭头

.select-wrapper {
  position: relative;
  width: 250px;
  -webkit-box-sizing: border-box;
}
.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 8px solid #000;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.arrow ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
.arrow:hover ul {
  display: block;
}
<div class="select-wrapper">
  <span>Select an option</span>
  <div class="arrow">
    <ul>
      <li>Item-1</li>
      <li>Item-2</li>
    </ul>
  </div>
</div>