Question

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

示例：

<div id="main">
    <div id="one">
       <p>Hover to hide div below</p>
    </div>
      <div id="two">
       <p>hide me please</p>
    </div>
</div>
<div id="main">
    <div id="one">
       <p>Hover to hide div below (this works)</p>
       <div id="two">
       <p>hide me please</p>
    </div>
    </div>

</div>

CSS

#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}
/* Help please */
#one:hover > #two {
    display:none;
}
#main #one:hover > #main #two {
  display:none;
}

谢谢你，如果有人可以编辑我的帖子并获得更好的头衔，我将不胜感激。我的英语很弱。

Answer 1

#one{
  background-color:green;
  color:white;
  height:40px;
}

#two{
  background-color:red;
  color:white;
  height:40px;
  display:in-line;
}

#one:hover + #two {
  display:none;
}

<div id="main">
  <div id="one">
    <p>Hover to hide div below</p>
  </div>
  <div id="two">
    <p>hide me please</p>
  </div>
</div>

#one{
  background-color:green;
  color:white;
  height:40px;
}
#two{
  background-color:red;
  color:white;
  height:40px;
}

#main #one:hover > #two:not(:hover) {
  display:none;
}

谢谢，但是你可以告诉我“＆gt;”，“+”和“〜”之间有什么区别

<div id="main"> <div id="one"> <p>Hover to hide div below (this works)</p> <div id="two"> <p>hide me please</p> </div> </div> </div>是任何直接孩子
>是同一级别的下一个元素
+是同一级别的下一个元素

div {
  margin: .25em 0;
  padding: .5em;
  box-sizing: border-box;
  display: inline-block;
  border: 3px solid;
  background: white;
}

div:hover {
  background: antiquewhite;
}

.base.base {
  background: silver;
}

.base   div { border-top-color:    red; }
.base > div { border-bottom-color: red; }
.base + div { border-left-color:   red; }
.base ~ div { border-right-color:  red; }

Answer 2

首先，您应该在代码中使用class而不是id。您可以使用C选择器隐藏下一个兄弟元素。

对于第一个+ div，当您将鼠标悬停在.main上时，可以使用.main div:hover + .two隐藏.two
对于第二个.one div，当您将鼠标悬停在.main中的第一个main div p:first-child:hover + .two上时，可以使用.two来隐藏p，或者您可以使用{{1} }}

.main

.main div > .two

Answer 3

页面上的每个ID都是唯一的。你不能重复＆＃34; main＆＃34; id或复制＆＃34; one＆＃34; 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>

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

3 个答案: