如何使用 CSS（跨度、悬停、选择器）在悬停时隐藏和显示元素？答案

【问题标题】：How to hide and show elements on hover using CSS (span, onhover, selectors)?如何使用 CSS（跨度、悬停、选择器）在悬停时隐藏和显示元素？
【发布时间】：2017-04-14 19:02:43
【问题描述】：

我有一个问题，当鼠标悬停在定义的关键字上时，我试图显示<aside> 文本内联。我计划这样做的方式是利用 <span>，它包装了 <aside>，然后我可以使用像 #main > article > .inline-aside, aside { display: none; } 这样的 CSS 选择器来选择这些特殊用途区域内的后代 <aside> 元素。

我似乎能够隐藏内容，但无法取回它们。问题可能是，我是一个完整的 CSS 新手，display: none 以某种方式删除了该元素。有没有办法单独使用 CSS 来实现？

这是相关的部分，我在https://jsfiddle.net/Veksi/z0d5j1xb/ 有一个更完整的 Fiddle。

<article id="faq-section-general" class="tab-content"> <h1>General</h1> <p>The four Byzantine <span class="inline-aside">generals.<aside>General inline aside.</aside></span></p> <p>Some more general text.</p> </article>

【问题讨论】：

标签： html css

【解决方案1】：

问题是you can't use <aside> inside of a <p>。然后<aside> 将被移到<p> 之外，这会改变你的DOM，这使得在.inline-aside 悬停时无法选择<aside> 作为you can't go back in the DOM。

但是，如果您将 <p> 例如更改为 <div>，则正确的选择器逻辑如下所示：

/* By default, hide aside blocks that have .inline-aside elements as parents. */
#main > article .inline-aside aside {
  display: none;
}

/* Show the aside elements inside .inline-aside elements when they're hovered. */
#main > article  .inline-aside:hover aside {
  display: inline; /* or block */
}

Updated JSFiddle.

【讨论】：

嗯，这回答了我所有挥之不去的疑问。非常好，谢谢！

【解决方案2】：

尝试（为您的代码示例）

tab-content > p > span.inline-aside:hover + aside{
  display:block/*or anything else*/
}

编辑你也可以使用transition 让事情变得更顺畅，就像这样：

tab-content > p > span.inline-aside:hover + aside{
  display:block;
  transition: all 0.5s ease-in-out;
}

【讨论】：

【解决方案3】：

如果<aside> 元素对您来说并不重要，您可以考虑使用内联元素作为弹出文本。

我修改了您的代码以在 .inline-aside 元素内使用另一个 <span>。在这里查看：https://jsfiddle.net/z0d5j1xb/3/

希望这就是你所需要的。

另外，一般建议 - 避免在 CSS 中使用深度嵌套，例如 #main > article > .inline-aside。

【讨论】：

【解决方案4】：

你有三个问题

1

span 是内联元素，但旁边是块元素

你不能将块元素放在内联元素中

问题在于，当您这样做时，浏览器会将块元素呈现在内联元素之外

你可以将 span 转为 div

2

您的选择器> 表示直接子代而不是后代，因此您必须在选择器#main > article > p > .inline-aside 中包含p 元素，或者只使用空格选择器#main .inline-aside

3

是你不能用display: none; 悬停一个元素你应该使用visibility: hidden;

这里是solution，但你仍然可以做得更好

【讨论】：

【解决方案5】：

我们可以使用javascript/jquery来隐藏或显示悬停事件的数据查看以下代码，在sn-p中，当你将鼠标悬停在将军词上时，它会显示内容

$(document).ready(function(){
	$( ".inline-aside" ).hover(
  function() {
    $('aside').css( 'display','initial')},function(){$('aside').css('display','none')} );
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<article id="faq-section-general" class="tab-content">
      <h1>General</h1>
      <p>The four Byzantine <span class="inline-aside">generals.<aside class="a" style="display:none">General inline aside.</aside></span></p>

      <p>Some more general text.</p>
    </article>
</body>

【讨论】：