Question

我遇到一个问题，当鼠标悬停在已定义的关键字上时，我试图显示sequences文本内联。我打算这样做的方式是利用包含<aside>的{{1}}，然后我可以使用之类的CSS选择器来选择这些特殊内容中的后代<aside>元素目的地区。

我似乎能够隐藏内容，但不能让它们回来。问题可能是，我是一个完整的CSS新手，#main > article > .inline-aside, aside { display: none; }以某种方式删除了元素。有没有办法单独使用CSS来实现这一目标？

以下是相关内容，我在https://jsfiddle.net/Veksi/z0d5j1xb/处有一个更全面的小提琴。

<aside>

Answer 1

尝试（代码示例）

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

EDIT 您还可以使用transition使事情更顺畅，如下所示：

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

Answer 2

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

我修改了您的代码，以便在元素中使用另一个.inline-aside。请在此处查看：https://jsfiddle.net/z0d5j1xb/3/

希望这就是你所需要的。

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

Answer 3

问题在于you can't use <aside> inside of a 。然后，<aside>会移到之外，这会更改您的DOM，因此无法在<aside>悬停为you can't go back in the DOM时选择.inline-aside。

但是，如果您将更改为<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

Answer 4

你有三个问题

1

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

你不能把一个块元素放在内联元素

中

问题在于，当您这样做时，浏览器会在内联元素

之外呈现块元素

你可以将span转换为div

<强> 2

您的选择器#include<stdio.h> void func(); void func() { int y; y=y+2; printf("%d",y); } int main() { func(); func(); return 0; }表示直接子女而非后代，因此您必须在选择器>中加入p元素，或者只使用空格选择器#main > article > p > .inline-aside

第3

您不能将#main .inline-aside的元素悬停在display: none;
上
这是一个solution，但你仍然可以做得更好

Answer 5

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

$(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>

如何使用CSS（span，onhover，selectors）隐藏和显示悬停元素？

5 个答案: