如何在悬停时实现带有其他内容的复选框标签？

Question

Kayak使用的复选框菜单只包含＆＃34;＆＃34; :hover上显示的标签中的选项。如何使用JS和/或CSS实现这一点？

Answer 1

使用Chrome Inspector，很容易看出Kayak如何实现这一目标：

HTML：

<div class="row">
  <div class="right">
    <a class="only">only</a>
    <a class="price">$500</a>
  </div>
  <span>
    ...checkbox ...1 stop
  </span>
</div>

的CSS：

.right {
  float: right;
}
.only {
  display: none;
}
.row:hover .only {
  display: block;
}