Orion31 Orion31 - 1 year ago 124
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,

Answer Source

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

h1.title:hover + .ps {
  visibility: visible;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download