0

Al pasar el mouse donde pone "acceso usuarios" (la caja digamos, el div, no el texto) se ilumina y esta correcto pero intento que se aplique los efectos que le puse al texto a la vez (si pasas el mouse por encima del texto de "acceso usuarios" verás que sale una linea debajo de color y el texto aumenta de tamaño. He intentando aplicar los efectos del hover del texto al div y no me funciona.

Aquí el código, pasen el mouse donde acceso usuarios para ver el problema:

* {
  margin: 0px;
  padding: 0px;
}

/* ----------------HEADER------------------- */

header {
  display: flex;
  height: 150px;
  width: 2000px;
  background-color: orangered;
}

.header-logo {
  height: 150px;
  width: 20%;
  background-color: #0d8c77;
  border-bottom: 4px solid #010b3d;
  border-right: 4px solid #010b3d;
}

.divlogoimg {
  text-align: center;
  margin-top: 25px;
}

.logoimg {
  width: 100px;
  opacity: 0.8;
}

.header-usuarios,
.header-autonomos,
.header-empresas {
  height: 150px;
  width: 30%;
  background-color: #009b81;
  border-bottom: 4px solid #010b3d;
  text-align: center;
}


.header-usuarios-text,
.header-autonomos-text,
.header-empresas-text {
  margin-top: 50px;
  font-family: "Rubik", sans-serif;
  font-size: 32px;
  color: whitesmoke;
  font-weight: 400;
  opacity: 0.95;
}

/*effects*/
.span-header-usuarios-text {
  background: linear-gradient(to right, rgba(1, 1, 1, 0), rgba(1, 1, 1, 0)),
    linear-gradient(
      to right,
      rgb(68, 2, 221),
      rgba(152, 215, 194, 1),
      rgb(63, 230, 194)
    );
  background-size: 100% 0.1em, 0 0.3em;
  background-position: 100% 100%, 0 115%;
  background-repeat: no-repeat;
  transition: background-size 350ms;
  border-radius: 20px;
}

.span-header-usuarios-text:hover,
.span-header-usuarios-text:focus {
  background-size: 0 0.1em, 100% 0.3em;
  font-size: 40px;
  cursor: pointer;
  -webkit-transition: font-size 2s;
  transition: background-size 350ms;
}

.header-usuarios:hover,
.header-usuarios:focus {
  background-color: rgb(13, 211, 158);
}

/* ----------------BODY------------------- */

body {
  background-color: #006d5b;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />

    <title>Document</title>
  </head>
  <body>
    <header>
      <div class="header-logo">
        <div class="divlogoimg">
          <img class="logoimg" src="/img/logoedit.png" />
        </div>
      </div>
      <div class="header-usuarios">
        <div class="header-usuarios-text"><span class="span-header-usuarios-text">ACCESO USUARIOS</span></div>
      </div>
      <div class="header-autonomos">
        <div class="header-autonomos-text"><span class="span-header-autonomos-text">ACCESO AUTONOMOS</span></div>
      </div>
      <div class="header-empresas">
        <div class="header-empresas-text"><span class="span-header-empresas-text">ACCESO EMPRESAS</span></div>
      </div>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

1
  • El codigo no lo enlazamos en las preguntas, lo incluimos en ellas. Para que lo veas acabo de editar tu pregunta y lo he agregado mediante la adición de un snippet. Puedes llevarte votos negativos si usas enlaces a tu código
    – masterguru
    Commented el 30 ene. 2022 a las 11:05

1 respuesta 1

0

¿Te refieres a dejarlo así? Ejecuta y prueba el código siguiente:

* {
  margin: 0px;
  padding: 0px;
}

/* ----------------HEADER------------------- */

header {
  display: flex;
  height: 150px;
  width: 2000px;
  background-color: orangered;
}

.header-logo {
  height: 150px;
  width: 20%;
  background-color: #0d8c77;
  border-bottom: 4px solid #010b3d;
  border-right: 4px solid #010b3d;
}

.divlogoimg {
  text-align: center;
  margin-top: 25px;
}

.logoimg {
  width: 100px;
  opacity: 0.8;
}

.header-usuarios,
.header-autonomos,
.header-empresas {
  height: 150px;
  width: 30%;
  background-color: #009b81;
  border-bottom: 4px solid #010b3d;
  text-align: center;
}


.header-usuarios-text,
.header-autonomos-text,
.header-empresas-text {
  margin-top: 50px;
  font-family: "Rubik", sans-serif;
  font-size: 32px;
  color: whitesmoke;
  font-weight: 400;
  opacity: 0.95;
}

/*effects*/
.span-header-usuarios-text {
  background: linear-gradient(to right, rgba(1, 1, 1, 0), rgba(1, 1, 1, 0)),
    linear-gradient(
      to right,
      rgb(68, 2, 221),
      rgba(152, 215, 194, 1),
      rgb(63, 230, 194)
    );
  background-size: 100% 0.1em, 0 0.3em;
  background-position: 100% 100%, 0 115%;
  background-repeat: no-repeat;
  transition: background-size 350ms;
  border-radius: 20px;
}

.header-usuarios:hover
.span-header-usuarios-text {
  background-size: 0 0.1em, 100% 0.3em;
  font-size: 40px;
  cursor: pointer;
  -webkit-transition: font-size 2s;
  transition: background-size 350ms;
}

.header-usuarios:hover,
.header-usuarios:focus {
  background-color: rgb(13, 211, 158);
}

/* ----------------BODY------------------- */

body {
  background-color: #006d5b;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />

    <title>Document</title>
  </head>
  <body>
    <header>
      <div class="header-logo">
        <div class="divlogoimg">
          <img class="logoimg" src="/img/logoedit.png" />
        </div>
      </div>
      <div class="header-usuarios">
        <div class="header-usuarios-text"><span class="span-header-usuarios-text">ACCESO USUARIOS</span></div>
      </div>
      <div class="header-autonomos">
        <div class="header-autonomos-text"><span class="span-header-autonomos-text">ACCESO AUTONOMOS</span></div>
      </div>
      <div class="header-empresas">
        <div class="header-empresas-text"><span class="span-header-empresas-text">ACCESO EMPRESAS</span></div>
      </div>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

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.