2

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>

1 respuesta 1

2

Si es posible hacerlo solo con css, lo que se me ocurrió hacer fue encerrar dentro de un div con el id #adrian a #more-information, no sería la respuesta exacta ya que el efecto ocurriría cuando pases el mouse encima del div y no del texto Adrian Polanco, pero traté de acercarme más a tu solución:

<section id="welcome-section">
  <div id="adrian">
    <h1>Hi, I am <a href="#more-information">Adrian Polanco</a></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>
  </div>
  <h1>click on my name to learn more about me :)</h1>
</section>

Ahora en tu css, lo que consiste es que cuando pases el mouse por el div #adrian, el display cambiará a block al id #more-information, ya que #adrian encierra a #more-information:

#adrian {
  text-align: center; /*centramos el texto para dar un mejor resultado*/
}

#more-information {
  display: none; /*el texto permanecerá oculto*/
}

#adrian:hover #more-information {
  display: block; /*al hacer efecto hover en #adrian, afectará a #more-information*/
}

Tu código final sería el siguiente:

.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;
}

#adrian {
  text-align: center;
}

#more-information {
  display: none;
}

#adrian:hover #more-information {
  display: block;
}
<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, I am</h1>
  <div id="adrian">
    <h1>Hi, I am <a href="#more-information">Adrian Polanco</a></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>
  </div>
  <h1>click on my name to learn more about me :)</h1>
</section>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.