CSS - 如何通过悬停另一个div来隐藏div [重复]

Posted 2023-03-06

【中文标题】CSS - 如何通过悬停另一个div来隐藏div [重复]

【英文标题】：CSS - How to hide div by hovering another div [duplicate]

【发布时间】：2016-11-24 00:12:59

【问题描述】：

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

例子：

jsfiddle.net

<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;

谢谢你，如果有人可以编辑我的帖子并制作更好的标题，我将不胜感激。我的英语很差。

【问题讨论】：

那么问题是什么？您的代码说“这有效”......在旁注中，您的代码包含两个具有相同 ID 的元素。这是不允许的，并且可能是问题的原因，因为最后一个 CSS 规则仅适用于其中一个。

问题是 woking 解决方案不同，它只演示了 >...

【参考方案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;

<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; 

<div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class=base> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>

【讨论】：

谢谢，但你能告诉我“>”、“+”和“~”有什么区别吗？

> 这会选择某个元素的直接子元素，~ 这会选择某个元素的所有兄弟元素`，+ 这只会选择元素的下一个兄弟元素。

@raold，更新了我的答案。

【参考方案2】：

页面上的每个 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>

【参考方案3】：

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

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

.one 
  background-color: green;
  color: white;
  height: 40px;

.two 
  background-color: red;
  color: white;
  height: 40px;
  display: in-line;

.main div:hover + .two,
.main div p:first-child:hover + .two 
  display: none;

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