Como adicionar estilos CSS embutidos no passeio

O ":flutuar”É o pseudo-seletor, o que significa que é reconhecido apenas na folha de estilo CSS. Os usuários não têm permissão para aplicar estilos em linha de CSS no passeio. No entanto, para adicionar CSS embutido no Hover, é melhor dar ao elemento um nome ou id de classe e depois usá -lo na folha de estilo para aplicar estilos ou usar funções JavaScript.

Esta redação o instruirá a adicionar estilos CSS no Hover usando JavaScript.

Como adicionar estilos CSS no Hover?

Não há métodos para usar o mouse no CSS embutido. No entanto, para aplicar o efeito do pau em um elemento usando seu ID, consulte o exemplo fornecido.

Exemplo

Em HTML, adicione um elemento div tendo o nome da classe “conteúdo principal”. Dentro desta div, adicione um “

”Elemento para especificar o cabeçalho. Depois disso, adicione o “”Elemento com algum conteúdo especificado com os atributos:

• • ““Href”Atributo especifica o link.
  • ““eu ia”O atributo está definido para torná -lo acessível ao CSS.
  • Especifique também as funções “passe o rato por cima()" e "mouse_out ()" iniciar. No mouse Pair, essas funções desencadearão e chamarão a função no JavaScript:

Adicione pairar no CSS embutido

Escola Linuxhint!

Vamos para a seção CSS, onde os elementos HTML são fornecidos com propriedades de estilo.

Elemento corporal de estilo

corpo
Background-Color: #863A6F;

A cor de fundo do elemento corporal é definida usando o “cor de fundo" propriedade.

Divis de conteúdo principal do estilo

.conteúdo principal
Largura: 400px;
Altura: 100px;
Background-Color: #D989B5;
margem: automático;
preenchimento: 20px;
Radio de fronteira: 10px;

O ".conteúdo principal ”Refere-se ao conteúdo principal da classe, que é estilizado da seguinte maneira:

• • ““largura”Propriedade define a largura do elemento HTML.
  • ““altura”Propriedade define a altura do elemento HTML.
  • ““cor de fundo”Propriedade especifica a cor de fundo do elemento.
  • ““margem”Propriedade define o espaço em todo o elemento.
  • ““preenchimento”Propriedade define o espaço no conteúdo do elemento.
  • ““Radio de fronteira”A propriedade é utilizada para arredondar as bordas do elemento.

Elemento de estilo

a
Size da fonte: 20px;
Decoração de texto: Nenhum;
preenchimento: 10px;

O "”O elemento é estilizado utilizando as seguintes propriedades:

• • ““tamanho da fonte”Propriedade especifica o tamanho da fonte do elemento.
  • ““decoração de texto”Propriedade com valor Nenhum remove o sublinhado do texto.

JavaScript

No código JavaScript dado:

• • ““”A tag é utilizada para especificar o código do script.
  • ““function mouse_over ()”: A função é a palavra -chave para definir a função mouse_over ().
  • ““documento.getElementById ("hov").estilo.cor = “amarelo””Hov”Do elemento como um parâmetro e define sua cor de estilo como amarelo.
  • ““function mouse_out ()”Usa o“documento.getElementById ("hov").estilo.cor = “branco””Método para pegar o id“Hov" do "”Elemento como um parâmetro no qual a cor do estilo deve ser alterada para branca.
  • ““”É a etiqueta de fechamento.

Aqui, você pode ver, no passe, o estilo de cor do texto muda para amarelo e, quando removido, a cor do texto se transforma em branco:

Essa é a maneira de aplicar estilos CSS no passeio.

Conclusão

O ":flutuar”É o pseudo-seletor, o que significa apenas no CSS, é reconhecido. Não existem métodos para adicionar estilos CSS embutidos no Hover. Portanto, é melhor usar as funções JavaScript para especificar as propriedades no mouse pairar sobre um elemento. Este post demonstrou o método para adicionar estilos CSS no passe.