Question

当我将鼠标悬停在文本上方时，我试图实现文本显示的效果。我看了另一个问题：Using only CSS, show div on hover over <a>，并尝试了一些解决方案，但它们对我不起作用。这是我的代码：https://codepen.io/anon/pen/PLYGyg。谢谢！

div#thesishereyay {
  margin-top: 50px;
  margin-left: 120px;
  position: absolute;
  opacity: 0;
  background-color: #000000;
}
    	
h4.thesis {
  margin: 10px;
}
    	
li.thesisbutton {
  position: absolute;
  margin-top: 15px;
  margin-left: 112px;
  opacity: 1;
}

.thesisbutton:hover div.thesishereyay {
  opacity: 1;
}

<ul class="nav">
  <li class="thesisbutton">Thesis</li>
</ul>
<div id="thesishereyay">
  <h4 class="thesis">
  Thirst for triumph during the<br>
  Vietnam war in order to prevent<br>
  a U.S. humiliation led to Lyndon<br>
  Johnson lying to the American public<br>
  about the Gulf of Tonkin incident to<br>
  gain support for the Gulf of Tonkin<br>
  resolution, which resulted in the<br>
  continuation of the war and the<br>
  tragedy of more lives being lost<br>
  for a war being fought in fear of what<br>
  might happen if the U.S. was defeated.</h4>
</div>

Answer 1

您可以做这样的事情。

div#thesishereyay {
  margin-top: 50px;
  margin-left: 120px;
  position: absolute;
  opacity: 0;
  background-color: #000000;
}
    	
h4.thesis {
  margin: 10px;
}
    	
li.thesisbutton {
  position: absolute;
  margin-top: 15px;
  margin-left: 112px;
  opacity: 1;
}

.nav:hover ~ #thesishereyay {
  opacity: 1;
}

<div class="main">
  <ul class="nav">
    <li class="thesisbutton">Thesis</li>
  </ul>
  <div id="thesishereyay">
    <h4 class="thesis">
    Thirst for triumph during the<br>
    Vietnam war in order to prevent<br>
    a U.S. humiliation led to Lyndon<br>
    Johnson lying to the American public<br>
    about the Gulf of Tonkin incident to<br>
    gain support for the Gulf of Tonkin<br>
    resolution, which resulted in the<br>
    continuation of the war and the<br>
    tragedy of more lives being lost<br>
    for a war being fought in fear of what<br>
    might happen if the U.S. was defeated.</h4>
  </div>
</div>

Answer 2

这是基本标记：

ul > li > div {display:none;} /* hide div inside li */
ul > li:hover > div {display: block;} /* show div when li hovered */

<ul class="nav">
  <li class="thesisbutton">Thesis
    <div id="thesishereyay">...</div>
  </li>
</ul>

希望有帮助。

Answer 3

不确定这是否是您要查找的内容，但请看一下：

li.hoverbutton {
  position: relative;
}

#hoveron {
  top: 100%;
  left: 0;
  position: absolute;
  display: none;
  background-color: #000000;
}

h4.showonhover {
  padding: 10px;
  color: #ffffff;
}

li.hoverbutton:hover #hoveron {
  display: block; 
}

<ul class="nav">
  <li class="hoverbutton">
    Hover!
    <div id="hoveron">
      <h4 class="showonhover">Text to show</h4>
    </div>
  </li>
</ul>

Answer 4

我知道这不是您想要的CSS，但也许会对某人有所帮助：）

$('#thesishereyay').on('mouseenter mouseleave', function(e) {
  var $block = $('#thesishereyay');

  if(e.type == 'mouseenter') {
    $block.show();
  } else if(e.type == 'mouseleave') {
    $block.hide();
  }
});

在：hover上显示Div时出现问题

4 个答案: