1

I have a problem in that I'm trying to show an <aside> text inline when a mouse is hovering over a defined keyword. The way I planned to do this to utilize the <span>, which wraps the <aside> and then I could use CSS selectors like #main > article > .inline-aside, aside { display: none; } to choose the descendant <aside> elements within these special purpose regions.

I seem to be able to hide the contents, but not to get them back. The problem might be, I'm a total CSS rookie, the display: none somehow removes the element. Is there a way to accomplish this using CSS alone?

Here are the relevant pieces and I have a fuller Fiddle at https://jsfiddle.net/Veksi/z0d5j1xb/.

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

Veksi
  • 3,556
  • 3
  • 30
  • 69

5 Answers5

1

try (for you code example)

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

EDIT You can also use transition to make things smoother, like this :

tab-content > p > span.inline-aside:hover + aside{
  display:block;
  transition: all 0.5s ease-in-out;
}
Vivick
  • 3,434
  • 2
  • 12
  • 25
1

If the <aside> element is not critical for you, you could consider using an inline element as pop-up text.

I modified your code to use another <span> inside the .inline-aside element. Check it out here: https://jsfiddle.net/z0d5j1xb/3/

Hope that's what you needed.

Also, a general recommendation - avoid using deep nesting in CSS like #main > article > .inline-aside.

makeiteasy
  • 766
  • 7
  • 11
1

The thing is that you can't use <aside> inside of a <p>. The <aside> would then be moved outside of the <p> which changes your DOM what makes it impossible to select the <aside> on hover of the .inline-aside as you can't go back in the DOM.

However, if you change your <p> for example to a <div> the correct selector logic would look like the following:

/* 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.

Community
  • 1
  • 1
Marvin
  • 9,164
  • 3
  • 26
  • 44
0

you have three issues

1

the span is inline element but aside is a block element

you can't put a block element inside inline element

the issue is that when you do so the browser render the block element outside the inline element

you can turn span to div

2

your selector > mean a direct child not a descendant so you must include the p element in your selector #main > article > p > .inline-aside or just use the space selector #main .inline-aside

3

is that you can't hover an element with display: none; you should use visibility: hidden;

here is a solution but you can still do better

Robert
  • 2,342
  • 2
  • 24
  • 41
0

We can use javascript/jquery for hiding or displaying data on hover event check out the following code,, In the snippet when u hover on the generals word it will show the content

$(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>
Bhanu Tharun
  • 134
  • 2
  • 14