Question

我有一个项目列表（称之为主题），我希望显示一个div，以便当用户悬停在主题上时，用户可以与之交互（称之为主题卡）。我目前的想法是在每个主题旁边放置一个div并相应地定位它。但是，我这样做很麻烦。它不能占用页面上的空间，所以我想我将使用position：absolute。但是，它需要始终位于主题的右侧，并且float：left和position：absolute的组合意味着主题卡只是放置在与主题重叠。

我能就此得到任何建议吗？我也对某种jquery建议持开放态度。真的，无论什么都是最简单，最符合标准的。

Answer 1

使用“display”属性。试试“显示：内联” http://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

如果一次最多可以显示一组topicdetails，请将一个div设置为位置0,0 display = none。无论何时需要显示，都要适当地设置位置（从mousover / hover DOM元素中获取它，或者用于触发显示它的事件的任何内容），然后加载/设置内容。在删除时，只需将显示设置为无（您可以忽略该内容，因为下次出现时它将被新内容替换。）

Answer 3

有大量的jQuery工具提示插件，您应该使用其中一个并按照您想要的方式进行配置。

以下是一些例子： http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Answer 4

如果你知道一切都有多大，那么你绝对可以将你的“主题卡”定位为负right以将其推向一边。像这样的CSS：

#element {
    margin-right: 100px;
    position: relative;
}
#sidecar {
    display: none;
    width: 100px;
    position: absolute;
    right: -100px;
    top: 0;
}

这个HTML结构：

<div id="element">
    <div id="sidecar">
    </div>
</div>

这是为了激活它：

$('#element').hover(function() {
    $('#sidecar').toggle();
});

演示：http://jsfiddle.net/ambiguous/5a79g/

如果您不知道有多大，那么您可以使用jQuery offset和width方法计算位置和宽度。

如何定位另一个div的div权限，但是不占用空间？

4 个答案: