html - 为什么我不能将鼠标悬停在另一个 p 元素上并得到相同的结果?

标签 html css

<分区>

<style>
  div{
    width: 300px;
    height: 300px;
    background-color: blue;
    display: none;
  }
  .hei:hover+div{
    display: block;
  }
</style>

<p class="hei">slm</p>
<br>
<p class="hei">hei</p>
<div class=""></div>

我给了他们相同的类,但只有 p 元素有效。我检查了 w3 学校,但找不到任何东西。

最佳答案

这是因为 + 选择器仅针对下一个元素,而 ~ 在您的情况下针对所有下一个 div 的。所以你的 CSS 将类似于这样的东西:.hei:hover~div

在这里您可以找到有关此行为的更多信息。 Difference between the selectors div + p (plus) and div ~ p (tilde)

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

第二个提示:不要使用 https://www.w3schools.com/对于学习,它的例子很差,并没有真正涵盖所有信息。 而是去寻找 https://developer.mozilla.org/en-US/

关于html - 为什么我不能将鼠标悬停在另一个 p 元素上并得到相同的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58309909/

上一篇:javascript - 如何在不更改当前页面的情况下更改特定目录?

下一篇:css - 为什么我的字体大小在使用相同的倾 Angular 时看起来不同?

相关文章:

html - CSS 悬停过渡无法正常工作

html - 基础 CSS 选择器

jquery - 延迟加载整个 DIV 而不是单个图像

javascript - JSON 使用 javascript 仅显示一项数据

css - 如何将嵌套在另一个面板内的 Bootstrap 面板内的图像居中?

javascript - 更改我的 .htaccess 后,我的 Css An Js 无法正常工作

css - 编译 Bootstrap SASS 文件时出错

asp.net - 如何使 ASP CheckBoxList 标签与复选框保持在同一行

css - 类、相邻兄弟和伪选择器不能一起工作

javascript - 如果有人已经在里面,ReactJs 会阻止某人加载页面