Meu hover não funciona
02/09/2017
0
<!DOCTYPE html>
<html lang="pt br">
<head>
<meta charset="UTF 8"/>
<title>Tudo sobre Google Glass</title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img src= "_imagens/glass-oculos-preto-peq.png"/>
Menu Principal
- Home
- Especificações
- Fotos
- Multimídia
- Fale conosco
</header>
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Saiba tudo sobre o Google Glass</h1>
<h2>por NB0ss</h2>
<h4>Atualizado em 23/Abril/2013</h4>
</hgroup>
<h2>O que é</h2>
<p>O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>
<figure class="foto-legenda">
<img src="_imagens/glass-quadro-homem-mulher.jpg"/>
<figcaption>
<h3>
Google glass
</h3>
<p> Uma nova maneira de ver o Mundo</p>
</figcaption>
</figure>
<h2>Data de lançamento</h2>
<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>
<h1>Especificações Técnicas</h1>
<h3>Tabela Técnica do Google Glass Mar/2013</h3>
<p>Tela:Resolução equivalente a tela de 25"
Camera: 5MP para fotos / 720p para vídeos
Conectividade: Wi-Fi/ Bluetooth
Memória Interna: 12GB</p>
<h2>Como funciona</h2>
<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p>
<h2>O que você pode fazer com o Google Glasses</h2>
<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>
[AQUI ENTRA UM VÍDEO]
Outras Notícias
Vídeo mais recente
[AQUI ENTRA UM VÍDEO]
<h2>Novidades no Glass</h2>
<p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>
<p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador</p>.
Copyright 2013 - by Gustavo Guanabara
Facebook | Twitter
</div>
</body>
</html>
Aqui a parte do CSS
@charset "UTF 8";
body{
background-color: white;
color: rgba(0,0,0,1);
}
p{
text-align: justify;
text-indent: 50px;
}
/*Formatação de imagens com legendas*/
figure.foto-legenda{
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px black;
}
figure.foto-legenda img{
width: 100%;
height:100%;
}
figure.foto-legenda figcaption{
opacity: 0;
position:absolute;
top:0px;
background-color: rgba(0,0,0,0.4);
color: white;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-legenda:hover,figcaption{
}
uso o Sublime Text 3
<html lang="pt br">
<head>
<meta charset="UTF 8"/>
<title>Tudo sobre Google Glass</title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css"/>
</head>
<body>
<div id="interface">
<header id="cabecalho">
<hgroup>
<h1>Google Glass</h1>
<h2>A revolução do Google está chegando</h2>
</hgroup>
<img src= "_imagens/glass-oculos-preto-peq.png"/>
Menu Principal
- Home
- Especificações
- Fotos
- Multimídia
- Fale conosco
</header>
<hgroup>
<h3>Tecnologia > Inovações</h3>
<h1>Saiba tudo sobre o Google Glass</h1>
<h2>por NB0ss</h2>
<h4>Atualizado em 23/Abril/2013</h4>
</hgroup>
<h2>O que é</h2>
<p>O Google Glass é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de Project Glass, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeoconferências. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o Google Glass encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>
<figure class="foto-legenda">
<img src="_imagens/glass-quadro-homem-mulher.jpg"/>
<figcaption>
<h3>
Google glass
</h3>
<p> Uma nova maneira de ver o Mundo</p>
</figcaption>
</figure>
<h2>Data de lançamento</h2>
<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>
<h1>Especificações Técnicas</h1>
<h3>Tabela Técnica do Google Glass Mar/2013</h3>
<p>Tela:Resolução equivalente a tela de 25"
Camera: 5MP para fotos / 720p para vídeos
Conectividade: Wi-Fi/ Bluetooth
Memória Interna: 12GB</p>
<h2>Como funciona</h2>
<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça</p>
<h2>O que você pode fazer com o Google Glasses</h2>
<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>
[AQUI ENTRA UM VÍDEO]
Outras Notícias
Vídeo mais recente
[AQUI ENTRA UM VÍDEO]
<h2>Novidades no Glass</h2>
<p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>
<p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador</p>.
Copyright 2013 - by Gustavo Guanabara
Facebook | Twitter
</div>
</body>
</html>
Aqui a parte do CSS
@charset "UTF 8";
body{
background-color: white;
color: rgba(0,0,0,1);
}
p{
text-align: justify;
text-indent: 50px;
}
/*Formatação de imagens com legendas*/
figure.foto-legenda{
position: relative;
border: 8px solid white;
box-shadow: 1px 1px 4px black;
}
figure.foto-legenda img{
width: 100%;
height:100%;
}
figure.foto-legenda figcaption{
opacity: 0;
position:absolute;
top:0px;
background-color: rgba(0,0,0,0.4);
color: white;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
transition: opacity 1s;
}
figure.foto-legenda:hover,figcaption{
}
uso o Sublime Text 3
Samuel
Curtir tópico
+ 0
Responder
Post mais votado
05/09/2017
Olá Samuel,
tudo bem?
O efeito do hover acontece quando você passa o mouse sobre o elemento desejado.
Por exemplo, no seu HTML você tem:
<h3>Google glass</h3> e
<p>Uma nova maneira de ver o Mundo</p>
Logo, se deseja inserir um efeito de background-color (cor de fundo) nesses elementos, você precisa adicionar no seu CSS, a seguinte informação:
p:hover, h3:hover { background-color: yellow; }
Salve, carregue o navegador novamente, passe o mouse sobre o h3 e os parágrafos e confira o resultado com a cor amarelo de fundo.
Para utilizar o efeito hover em imagens, você pode seguir o exemplo abaixo:
No HTML:
<a class="imagemdestaque" ref="#">
<img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Imagem do Google" />
</a>
No CSS:
.imagemdestaque { display: inline-block; height: 200px; position: relative; width: 272px; }
.imagemdestaque:hover::after { visibility: visible; }
.imagemdestaque img { width: 100%; }
.imagemdestaque::after { background: url(https://duckduckgo.com/assets/logo_homepage.normal.v107.svg) no-repeat, rgba(255, 255, 255, .6); background-position: 45% 55%; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; visibility: hidden; width: 100%; }
Salve, carregue o navegador novamente, passe o mouse sobre a imagem do Google e confira o resultado com a nova imagem que chamei no CSS.
Espero ter ajudado.
Abraço,
Cida Luna.
tudo bem?
O efeito do hover acontece quando você passa o mouse sobre o elemento desejado.
Por exemplo, no seu HTML você tem:
<h3>Google glass</h3> e
<p>Uma nova maneira de ver o Mundo</p>
Logo, se deseja inserir um efeito de background-color (cor de fundo) nesses elementos, você precisa adicionar no seu CSS, a seguinte informação:
p:hover, h3:hover { background-color: yellow; }
Salve, carregue o navegador novamente, passe o mouse sobre o h3 e os parágrafos e confira o resultado com a cor amarelo de fundo.
Para utilizar o efeito hover em imagens, você pode seguir o exemplo abaixo:
No HTML:
<a class="imagemdestaque" ref="#">
<img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Imagem do Google" />
</a>
No CSS:
.imagemdestaque { display: inline-block; height: 200px; position: relative; width: 272px; }
.imagemdestaque:hover::after { visibility: visible; }
.imagemdestaque img { width: 100%; }
.imagemdestaque::after { background: url(https://duckduckgo.com/assets/logo_homepage.normal.v107.svg) no-repeat, rgba(255, 255, 255, .6); background-position: 45% 55%; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; visibility: hidden; width: 100%; }
Salve, carregue o navegador novamente, passe o mouse sobre a imagem do Google e confira o resultado com a nova imagem que chamei no CSS.
Espero ter ajudado.
Abraço,
Cida Luna.
Aparecida Gonçalves
Responder
Clique aqui para fazer login e interagir na Comunidade :)
