How do I enable Hover without creating a css file?

Asked

Viewed 75 times

1

Good afternoon, someone could assist us in this issue, I’m trying to activate Hover to change Background-color, if you have how to activate Hover without creating a css file.

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

javascript html css
  • 1

    It is not possible to use pseudo classes in inline style. Create an Athos tag in head and create :Hover there

1 answer

1

As stated above, it is not possible to create pseudo classes in the inline style, that is, the style that is applied directly to the tag. But in your HTML file between the tags head(is indicated to be between them, not mandatory, can be within the body) you can create a stylesheet without creating a css file.

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

For future maintenance purposes, I suggest using a css file.

  • 1

    Okay, thanks for the tip

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.