Skip to main content
se añadieron 33 caracteres en el cuerpo
Origen Enlace

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>

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

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>

Origen Enlace

Es posible enseñar el texto oculto solo con HTML y CSS?

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