1

Boa tarde, alguém poderia nós auxiliar nesta questão, estou tentando ativar o hover para alterar Background-color, se tem como ativar o hover sem criar um arquivo css.

<body>
       <div> 
        <img  style="float: left;" src="img/logo-topo.png">
        <div style="background-color: rgb(40,39,44); width: 100%;text-align: right; padding-bottom: 0.9px;">
            <a href="#" style="text-decoration: none;"><p style="color: #9acccb;padding-bottom: 2%; padding-top: 2%; padding-right: 1%; font-family: Arial, Helvetica, sans-serif; font-size: 13px;">Fale Conosco</p></a>
        </div>
        <div align="center" class="teste" style="background-color: rgb(44,43,49); padding-top: 2%; padding-bottom: 1%;">
          <fieldset style="display: inline-block;width: 40%; height: 20%; border-radius: 50px; border: 3px solid #565262;"><input style="height: 40px; width: 60%; background-color: rgb(44,43,49); border: none;" type="text" placeholder="PROCURE PRODUTOS"><div style="background-color: rgb(221,205,42); float: right; border: 3px solid rgb(221,205,42); width: 125px; border-radius: 15px; height: 35px;"><a style="text-decoration: none; color: black; " href="#"><b style="font-size: 14px; text-decoration: none;font-family: Arial, Helvetica, sans-serif; ">Buscar<span style="width: 5px ;height: 6px; color: #003d85;" class="material-icons"> search </span></b></a></div></fieldset>
          (ADICIONAR O HOVER AQUI PARA ALTERAR BACKGORUND-COLOR)  <div style="margin-right: 10px; float: right; display: inline-block; border: 3px solid rgb(68,227,186); width: 14%; height: 40px; background-color: #44e3ba; border-radius: 50px;"><a href="#" style="display: inline-block; text-decoration: none;"><span  style="color: rgb(56,66,49);" class="material-icons"> shopping_cart </span><b style=" padding-left: 3px; font-size: 12px; color: rgb(56,66,49); font-family: Arial, Helvetica, sans-serif;">CARRINHO DE COMPRAS</b></a></div>
          (ADICIONAR O HOVER AQUI PARA ALTERAR BACKGORUND-COLOR )  <div style="margin-right: 10px; float: right; display: inline-block; border: 3px solid rgb(68,227,186); width: 10%; height: 40px; background-color: #44e3ba; border-radius: 50px;"><a href="#" style="display: inline-block; text-decoration: none;"><span  style="color: rgb(56,66,49);" class="material-icons"> people_outline </span><b style=" padding-left: 3px; font-size: 12px; color: rgb(56,66,49); font-family: Arial, Helvetica, sans-serif;">Área do Cliente</b></a></div>            
        </div>
       </div>
    </body>

1
  • 1
    Não eh possível usar pseudo classes no style inline. Cria uma tag Athos no head e cria o :hover lá
    – hugocsl
    Commented 9/11/2020 às 18:38

1 Resposta 1

1

Como dito acima, não é possível criar pseudo classes no estilo inline, ou seja, o estilo que fica aplicado diretamente na tag. Mas no seu arquivo HTML entre as tags head(é indicado que seja entre elas, não obrigatório, pode ser dentro do body) você pode criar uma folha de estilo sem precisar criar um arquivo css.

<style type="text/css">
    .minhaclass:hover{
        background: #333333;
        color: #FFF;
    }
</style>

Para questão de manutenções futuras, sugiro o uso de um arquivo css.

1
  • 1
    Ok, obrigado pela dica Commented 10/11/2020 às 13:22

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .