非常感谢Mike和Robertc的有用帖子!
如果您的HTML中包含两个元素,并且您想:hover
在另一个元素上进行样式更改,然后针对另一种样式更改作为目标,则这两个元素必须直接相关-父母,子女或兄弟姐妹。这意味着这两个元素要么必须在另一个元素之内,要么必须都包含在同一较大的元素之内。
当用户阅读我的网站时,我想在浏览器右侧的框中显示定义。 :hover
突出显示的术语时。因此,我不希望将'definition'元素显示在'text'元素内。
我几乎放弃了,只是将javascript添加到了我的页面,但这就是未来!我们不必忍受CSS和HTML带来的麻烦,告诉我们必须在哪里放置元素才能实现所需的效果!最后,我们妥协了。
虽然文件中的实际HTML元素必须嵌套或包含在单个元素中才能彼此有效:hover
,但css position
属性可用于在任何需要的位置显示任何元素。我使用position:fixed将操作的目标放置在:hover
用户希望显示在用户屏幕上的位置,而不管它在HTML文档中的位置如何。
的HTML:
<div id="explainBox" class="explainBox"> /*Common parent*/
<a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/
</a> is as ubiquitous as it is mysterious. /*plain text*/
<div id="definitions"> /*Container for :hover-displayed definitions*/
<p class="def" id="light"> /*example definition entry*/ Light:
<br/>Short Answer: The type of energy you see
</p>
</div>
</div>
CSS:
/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/
#explainBox #light:hover~#definitions>#light {
display: inline-block;
}
.def {
display: none;
}
#definitions {
background-color: black;
position: fixed;
/*position attribute*/
top: 5em;
/*position attribute*/
right: 2em;
/*position attribute*/
width: 20em;
height: 30em;
border: 1px solid orange;
border-radius: 12px;
padding: 10px;
}
在此示例中,:hover
来自内部元素的命令的目标#explainBox
必须#explainBox
位于或内#explainBox
。分配给#definitions的位置属性会强制其显示在所需位置(在外部#explainBox
),即使它在技术上位于HTML文档中不需要的位置。
我了解将相同的样式#id
用于多个HTML元素被视为不良形式;然而,在这种情况下,#light
由于它们在唯一的#id
“ d”元素中的相应位置,因此可以独立描述它们的实例。有什么理由id
#light
在这种情况下不重复吗?
~
器:“多维数据集在DOM中位于容器之后的某个位置并共享一个父级”