Question

我一直试图在另一个div的悬停上显示一个隐藏的div，并且无法理解它为什么不起作用。我有一个小提琴。 JSFiddle

HTML

<div class="mcs-div">
  <a href="#">
    <img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
  </a>
</div>

<div class="mcs-div-content">
  <p>
    Ut arcu enim, dictum quis ultrices id, sagittis eget nulla 
  </p>
</div>

我已经尝试显示隐藏div中的所有选择器，但没有任何工作。

CSS

.mcs-div-content {
 display: none;
}
.mcs-div:hover .mcs-div-content {
 display: block;
}

Answer 1

要理解为什么这不起作用，请尝试删除＆＃34;：hover＆＃34;从CSS规则再看一遍。

.mcs-div-content <{em>} .mcs-div中包含，因此该规则永远不会找到任何适合它的元素。尝试用以下代码替换第二条规则：

.mcs-div:hover + .mcs-div-content { display: block; }

+表示＆＃34; next-sibling元素＆＃34;。

Answer 2

添加“〜”：

.mcs-div-content {
    display: none;
}
.mcs-div:hover ~ .mcs-div-content {
    display: block;
}

Answer 3

mcs-div-content不是mcs-div try

的孩子

<div class="mcs-div">
  <a href="#">
    <img src="http://lorempixel.com/100/100/" alt="Napit Graphic" />
  </a>


   <div class="mcs-div-content">
    <p>
      Ut arcu enim, dictum quis ultrices id, sagittis eget nulla 
    </p>
</div>

  </div>

将鼠标悬停在Div上以显示隐藏的内容

3 个答案: