Estoy haciendo proyecto de portfolio, que ire actualizando a medida que aumente mis conocimientos, he estado buscando una manera de hacer que al poner el mouse sobre el nombre(el elemento a con el id "adrian", se muestre más información (es decir, se muestre el div con el id "more-information"), es posible hacer eso (o algo parecido a esto) solo utilizando HTML y CSS o necesito a fuerzas saber JavaScript? Porque por ahora solo tengo algo de conocimiento de HTML y CSS este es el código:
.header {
background: linear-gradient(aquamarine, aqua, deepskyblue);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 75px;
}
#navbar > .menu {
display: flex;
flex-direction: row;
justify-content: right;
}
#navbar {
position: fixed;
top: 0;
right: 0;
margin-right: 30px;
}
.sub-menu {
margin-left: 30px;
height: 50px;
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
#more-information {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Adrian Polanco</title>
</head>
<body>
<header class="header">
<div class="name"><h2>Adrian Polanco</h2></div>
<nav id="navbar">
<ul class="menu">
<li class="sub-menu"><a href="#welcome-section">About me</a></li>
<li class="sub-menu" >Projects</li>
<li class="sub-menu" href="#profile-link">My networks</li>
<li class="sub-menu">Contact</li>
</ul>
</nav>
</header>
<section id="welcome-section">
<h1>Hi,</h1> <h1>I am <a id="adrian" href="#more-information">Adrian Polanco</a></h1><h1>click on my name to learn more about me :) </h1>
<div id="more-information">
<h4>I am a Software Development studying at ITLA as well as self-taught, currently I have special intereset in Front-End Delvelopment</h4>
</div>
</section>
</body>