0

hola he estado intentando hacer una copia del menú de apple con html5 y css3. lo que pasa es que cuando he intentado solucionar un error con el tema del icono de la barra del buscador no me funciona, el objetivo que quiero llegar a alcanzar es: que tenga un efecto hover blanco con el icono incluido en esta barra de buscador

lamento enserio si incumplo con las reglas las estudie un poco y creo que estoy bien, si tengo algún error me disculpo

código de HTML:

    <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>El KIOSCO</title>
                             <!------ estilos ------>
  <link rel="stylesheet" type="text/css" href="E:\tienda\modelo\css\estilos.css">
                            <!------- logotipo ----->
  <link rel="icon" type="img" href="E:\tienda\modelo\img\logito.png">
                            <!------  ------>
  <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
                            <!------  ------>
  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
                            <!------  ------>
  <link rel="stylesheet" href="https://i.icomoon.io/public/temp/3b59cb85ac/UntitledProject/style.css">

</head>

<body>
  <header>
    <nav class="menu-nav">
      <ul class="menu">
        <li><a href=""><span class="icon-house"></span></a></li>
        <li><a href="">Nosotros</a></li>
        <li><a href="">Producto</a></li>
        <li><a href="">Contacto</a></li>
        <li><a href="">Registro</a></li>
      </ul>
      <div class="search_bar">
        <a href="#" class="icon-search"></a>
        <input type="text" id="bar">
      </div>
    </nav>
  </header>


<!------------------ fin menu --------------->
</body>

este es el código HTML que tengo, no creo tener el error allí sino en el código CSS aquí se los dejo:

*{
    margin: 0;
    padding: 0;
}

ul, ol{
    list-style: none;
}

header{
    width: 100%;
}

.menu-nav {
    width: 1000px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 4px;
    background: #979797;
    border-bottom: 1px solid #555555;
    background: #8b8b8b;

    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: rgb (139,139,139);</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: -moz-linear-gradient (top, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100% );</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: -webkit-linear-gradient (top, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100% );</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: gradiente lineal (hacia abajo, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100%);</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 8b8b8b', endColorstr = '# 717171', GradientType = 0);</font></font>
}


.menu {
    width: 85%;
    display: table;
    table-layout: fixed;
    float: left;
}

.menu li {
    display: table-cell;
    overflow: hidden;
    width: 100%;
    border-right: 1px solid #5c5c5c;
    border-left: 1px solid rgba(255,255,255,.2);
}

.menu li:first-child {
    border-left: none;
}

.menu li:first-child:hover {
    border-left: none;
}

.menu li a {
    color: #fff;
    display: block;
    font-family: arial;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(0,0,0.5);
}

.menu li:hover {
    background: rgb(0,0,0.5);
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: none;
}

.menu li:active {
    background: rgba(0,0,0,.3);
    box-shadow: inset 0px 3px 2px rgba(0,0,0,1);
}

.search_bar {
    width: 15%;
    float: left;
    padding: 7px 10px;
    box-sizing: border-box;
    position: relative;
}

.search_bar input {
    width: 100%;
    height: auto;
    border-radius: 50px;
    border: none;
    border-bottom: 1px solid #585858;
    padding: 0px 10px 0px 25px;
    box-sizing: border-box;
    height: 22px;

    box-shadow: inset 0px 1px 3px rgba(0,0,0.7);

    background: #7E7E7E;
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">color de fondo: rgb (126,126,126);</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@incluye gradiente de filtro (# 7e7e7e, # 767676, vertical);</font></font>
    <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@incluir imagen de fondo (gradiente lineal (arriba, rgba (126,126,126,1) 0%, rgba (121,121,121,1) 50%, rgba (110,110,110,1) 52%, rgba (118,118,118,1) 100%);</font></font>
}




.search_bar input:focus {
    background: #fff;
    box-shadow: none;
}

.icon-house {
    display: block;
    position: relative;
    top: 2px;
}

.icon-search {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: #fff;
    text-decoration: none;
}
2
  • ¿Osea que tanto el item del menú como el ícono de home se pongan blancos en hover?
    – user128299
    Commented el 1 may. 2020 a las 1:22
  • que tenga un efecto hover con el ratón y que cuando se empieza a escribir en la barra de búsqueda el icono desaparezca
    – Neyder B
    Commented el 1 may. 2020 a las 1:24

1 respuesta 1

0

Puedes hacer la animacion en hover desde css, con los atributos que deseas que tenga

#icono:hover {
  color: white;
}

Para ocultar el icono, puedes detectar cuando hay una entrada en el input

document.getElementById("bar").addEventListener("keyup", function() {});

y ocultar el icono

document.getElementById("icono").style.display = "none";

document.getElementById("bar").addEventListener("keyup", function() {

  if (document.getElementById("bar").value.length > 0) {
    document.getElementById("icono").style.display = "none";
  } else {
    document.getElementById("icono").style.display = "block";
  }
});
* {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

header {
  width: 100%;
}

.menu-nav {
  width: 1000px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 4px;
  background: #979797;
  border-bottom: 1px solid #555555;
  background: #8b8b8b;
}

.menu {
  width: 85%;
  display: table;
  table-layout: fixed;
  float: left;
}

#icono:hover {
  color: white;
}
<head>
  <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  <link rel="stylesheet" href="https://i.icomoon.io/public/temp/3b59cb85ac/UntitledProject/style.css">

</head>

<body>
  <header>
    <nav class="menu-nav" style="width:100px">
      <ul class="menu">
        <li><a href=""><span class="icon-house"></span></a></li>
        <li><a href="">Nosotros</a></li>
        <li><a href="">Producto</a></li>
        <li><a href="">Contacto</a></li>
        <li><a href="">Registro</a></li>
      </ul>
      <br>
      <div class="search_bar">
        <span href="#" class="icon-search" id="icono"></span>
        <input type="text" id="bar">
      </div>
    </nav>
  </header>


</body>

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.