如何在悬停时使用附加内容实现复选框标签？

Question

Kayak使用在:hover上显示的标签中带有“仅”选项的复选框菜单。如何通过JS和/或CSS来实现？

Answer 1

使用Chrome检查，很容易看到皮艇如何实现这一点：

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; 
}