鼠标事件和块元素

debugcn 发表于 Dev

酸性的

在我的文档中，我有几个div text-align: center：

<div>bla bla</div>
<div>bla bla bla bla</div>
<div>bla bla bla</div>

问题在于，尽管内部内容可能不大width: 100%，但div的值可能使它们比内容宽得多。鼠标事件捕获在所有图示的区域中：在此处输入图片说明

我用JavaScript创建了自己的自定义工具提示，当鼠标与内容之间的距离太远或太远时，它就会出现。

相反，我希望仅在将鼠标悬停在div的内容上时显示工具提示，或者至少使其看起来像这样：在此处输入图片说明

将displaydiv的设置为可以将inline-block它们的大小减小到内容的宽度，但这也会使所有div出现在同一行中。
有没有办法在所有div之间不使用display: inline和插入<br>s来实现我想要的？这根本看起来并不方便。

编辑：如评论中所建议，另一种可能的解决方案是将每个div的内容包装在一个span元素中并向其中添加mouse事件，但这听起来也不是一个方便的解决方案，尤其是因为div的内容可能以编程方式进行更改。

约翰索

将显示类型设置为表格，同时将边距设置为0自动将完成您所需要的。

div {
    display: table;
    margin: 0 auto;
}

您也不需要text-align：居中运行即可。http://jsfiddle.net/NEqvD/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-7

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章