CSS-如何通过悬停另一个div来隐藏div_Css

CSS-如何通过悬停另一个div来隐藏div

css

CSS-如何通过悬停另一个div来隐藏div,css,Css,嗨，我有一些css代码的问题。我创建了简单的JSFIDLE，所以我希望您能够理解我的问题例如：谢谢你，如果有人能编辑我的文章，并使更好的标题，我将不胜感激。我的英语很差。 #一个{ 背景颜色：绿色；颜色：白色；高度：40px； } #两个{ 背景色：红色；颜色：白色；高度：40px；显示：在线显示； } #一：悬停+二{ 显示：无； } 悬停以隐藏下方的div 请把我藏起来 #一个{ 背景颜色：绿色；颜色：白色；高度：40px； } #两个{ 背景色：红色；颜色：白色；

嗨，我有一些css代码的问题。我创建了简单的JSFIDLE，所以我希望您能够理解我的问题

例如：

谢谢你，如果有人能编辑我的文章，并使更好的标题，我将不胜感激。我的英语很差。

#一个{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
#两个{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
#一：悬停+二{
显示：无；
}


悬停以隐藏下方的div
请把我藏起来

#一个{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
#两个{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
#一：悬停+二{
显示：无；
}


悬停以隐藏下方的div
请把我藏起来

首先，您应该在代码中使用class而不是id。您可以使用

选择器隐藏下一个同级元素

对于第一个

.main

div，您可以使用

.main div:hover+.two

隐藏

.two

，当您将鼠标悬停在

.one

对于第二个

.main

div，您可以使用

main div p:first child:hover+.two

在

.main

中将鼠标悬停在first

上时隐藏

.two

，也可以使用

.main div>.two

.one{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
.二{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
.主分区：悬停+.2，
.主分区p:第一个子分区：悬停+.二{
显示：无；
}


悬停以隐藏下方的div
请把我藏起来
将鼠标悬停以隐藏下方的div（此操作有效）
请把我藏起来

首先，您应该在代码中使用class而不是id。您可以使用

选择器隐藏下一个同级元素

对于第一个

.main

div，您可以使用

.main div:hover+.two

隐藏

.two

，当您将鼠标悬停在

.one

对于第二个

.main

div，您可以使用

main div p:first child:hover+.two

在

.main

中将鼠标悬停在first

上时隐藏

.two

，也可以使用

.main div>.two

.one{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
.二{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
.主分区：悬停+.2，
.主分区p:第一个子分区：悬停+.二{
显示：无；
}


悬停以隐藏下方的div
请把我藏起来
将鼠标悬停以隐藏下方的div（此操作有效）
请把我藏起来

页面上的每个id都是唯一的。您不能有重复的“主”id或重复的“一”id。请尝试以下操作：

<style>
.parent{
  background-color:green;
  color:white;
  height:40px;
}
.child{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
.parent:hover > .child {
    display:none;
}

</style>
<body>

<div>

    <div class="parent">
       <p>Hover to hide div below</p>

      <div class="child">
       <p>hide me please</p>
    </div>

</div>

<div >

    <div class="parent">
       <p>Hover to hide div below (this works)</p>

       <div class="child">
        <p>hide me please</p>
        </div>
    </div>

</div>


.家长{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
.孩子{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
/*请帮忙*/
.parent:hover>.child{
显示：无；
}
悬停以隐藏下方的div
请把我藏起来
将鼠标悬停以隐藏下方的div（此操作有效）
请把我藏起来

页面上的每个id都是唯一的。您不能有重复的“主”id或重复的“一”id。请尝试以下操作：

<style>
.parent{
  background-color:green;
  color:white;
  height:40px;
}
.child{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
.parent:hover > .child {
    display:none;
}

</style>
<body>

<div>

    <div class="parent">
       <p>Hover to hide div below</p>

      <div class="child">
       <p>hide me please</p>
    </div>

</div>

<div >

    <div class="parent">
       <p>Hover to hide div below (this works)</p>

       <div class="child">
        <p>hide me please</p>
        </div>
    </div>

</div>


.家长{
背景颜色：绿色；
颜色：白色；
高度：40px；
}
.孩子{
背景色：红色；
颜色：白色；
高度：40px；
显示：在线显示；
}
/*请帮忙*/
.parent:hover>.child{
显示：无；
}
悬停以隐藏下方的div
请把我藏起来
将鼠标悬停以隐藏下方的div（此操作有效）
请把我藏起来

那么问题是什么？你的代码上写着“这很有效”。。。另一方面，您的代码包含两个具有相同ID的元素。这是不允许的，并且可能是问题的原因，因为上一个CSS规则只对其中一个元素有效。问题是工作解决方案不同，它只演示了>的用法。那么问题是什么？你的代码上写着“这很有效”。。。另一方面，您的代码包含两个ID相同的元素。这是不允许的，并且可能是问题的原因，因为上一个CSS规则只对其中一个有效。问题是工作解决方案不同，它只演示了>…谢谢，但您能告诉我“>”、“+”和“~”之间的区别吗“

这选择某个元素的直接子元素，

这选择某个元素的所有同级元素，

这只选择元素的下一个同级元素。@raold，更新了我的答案。谢谢，但是你能告诉我“>”、“+”和“~”之间有什么区别吗？

这选择了某个元素的直接子元素，

此选项选择某个元素的所有同级元素`和

此选项仅选择元素的下一个同级元素。@raold，已更新我的答案。

<style>
.parent{
  background-color:green;
  color:white;
  height:40px;
}
.child{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
.parent:hover > .child {
    display:none;
}

</style>
<body>

<div>

    <div class="parent">
       <p>Hover to hide div below</p>

      <div class="child">
       <p>hide me please</p>
    </div>

</div>

<div >

    <div class="parent">
       <p>Hover to hide div below (this works)</p>

       <div class="child">
        <p>hide me please</p>
        </div>
    </div>

</div>