Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/41.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS-一个嵌套元素，不使用Javascript选择另一个嵌套元素_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html CSS-一个嵌套元素，不使用Javascript选择另一个嵌套元素

Html CSS-一个嵌套元素，不使用Javascript选择另一个嵌套元素

html css

Html CSS-一个嵌套元素，不使用Javascript选择另一个嵌套元素,html,css,Html,Css,我希望能够将鼠标悬停在“内部”元素上，并使“hoverbar”元素出现。我遇到的问题是元素嵌套在不同的父元素中。我知道使用javascript会更容易，但如果可能的话，我想知道如何使用CSS 这就是我一直试图做到的 .inner:hover + .other-content .hoverbar{ visibility:visible;} 您只能为兄弟姐妹应用样式。您不能选择父项。因此，如果您想设置.hoverbar的样式，可以通过两种方式来实现： 第一个是更改选择器： 第二个是更改HTML：

我希望能够将鼠标悬停在“内部”元素上，并使“hoverbar”元素出现。我遇到的问题是元素嵌套在不同的父元素中。我知道使用javascript会更容易，但如果可能的话，我想知道如何使用CSS

这就是我一直试图做到的

.inner:hover + .other-content .hoverbar{
visibility:visible;}

您只能为兄弟姐妹应用样式。您不能选择父项。因此，如果您想设置
.hoverbar
的样式，可以通过两种方式来实现：

第一个是更改选择器： 第二个是更改HTML： 将
其他内容
移动为
内容的子内容
：

*{
保证金：0；
填充：0；
}
.内容{
身高：100%；
宽度：100%；
背景色：红色；
填充：0；
保证金：0；
位置：绝对位置；
}
.气垫杆{
身高：10%；
宽度：100%；
背景颜色：蓝色；
位置：绝对位置；
底部：0；
保证金：0；
填充：0；
可见性：隐藏；
}
.internal:hover+.other content>.hoverbar{
能见度：可见；
}

内部的
悬停杆
能否将
内部：悬停
更改为
。内容：悬停
？除此之外，我不知道这有多可能。CSS可以执行相邻和嵌套操作，但不会遍历DOM。。。它像这样向下倾泻？

.content:hover + .other-content .hoverbar {
    visibility:visible;
}