Orion31 Orion31 - 10 months ago 41
CSS Question

CSS: Making text appear on hover

I was just making random HTML things just for fun when I ran into a problem that even google couldn't solve (not a good sign). I was trying to make a text box appear when I hovered over something different. I saw many things on google that did this, but implying that you had no other code for the object you were hovering over, meaning the only thing it would do would make the text appear, so animation (and even though this didn't work either, I had animation on header, which was going to be hovered over. Here is my code:

In my code: I want to hover over the h1 block and make the h3 block appear.


<!DOCTYPE html>

<link rel="stylesheet" href="style.css">

<body style="font-family:'Myriad Pro' ">
<div class="title">
<h1 class="title">Random Thing</h1>
<h3 class="ps">Playing around in HTML!</h3>



font-size: 100px;
background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 5.6s ease, 3s transform;
background-position: left;
transform: translateX(150px)
<!-- Where the .ps would appear -->
visibility: hidden;

Personally, I thought other people would have this question.

Thank you for your time,


You can use the adjacent sibling combinator +: https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators

h1.title:hover + .ps {
  visibility: visible;