Respostas interessantes marcadas com a tag

21 votos
Aceito

Mostrar imagem sob outra com hover css

Tem várias formas de fazer. Eu optaria por colocar a imagem de play em um elemento ::after para não sujar o código html, por ser somente uma informação "visual" de que o elemento é um ...
Renan Gomes's user avatar
  • 19,3mil
12 votos
Aceito

Efeito hover em um elemento afetar outro

Observando que o h1 está dentro do li, você pode fazer com CSS puro. Por exemplo: li:hover h1 { /*aqui o seu estilo para H1*/ } Veja funcionando: li:hover h1 { border: 2px solid #FFFF00; ...
GilCarvalhoDev's user avatar
9 votos
Aceito

Como Inspecionar um elemento que só aparece quando faço Hover em outro elemento?

Siga os passos: Clique sobre o elemento que você precisa dar o hover e inspecione elemento nele. No HTML verifique que este elemento está selecionado e você verá na direita um item :hov Clique em :...
Jasar Orion's user avatar
  • 1.009
7 votos

Tem como diminuir este script sem perder a funcionalidade?

Solução simples apenas com CSS: Implemente uma classe CSS que contenha as definições desejadas na pseudo-classe hover: .hoverable:hover { //conteúdo das classes displayblock e colorblue juntas. }...
OnoSendai's user avatar
  • 36,9mil
7 votos
Aceito

CSS pegar siblings antes do elemento?

CSS não tem seletor que resolva anterioridade, mas no seu caso um "duplo hover" pode resolver (funciona no IE11, inclusive): .main{ width: 100%; height:50px; } .child{ width:50px; ...
Largato's user avatar
  • 93,2mil
7 votos
Aceito

Porque a transparência da imagem no Botão não funciona do Firefox?

Além do Firefox, também acontece no IE11. Por ser um botão, os eventos do mouse (mouseover, mouseleave, etc.) ficam todos vinculados ao próprio botão, e não aos seus elementos-filhos. Com isso, um :...
Meu ovo's user avatar
  • 80,6mil
6 votos

Como usar a função inversa do jQuery para desfazer algo?

hover não é um handler que o método on() entende. Para isso, o jQuery disponibiliza os eventos mouseenter e mouseleave. Para facilitar a vida do desenvolvedor, existe o método hover(). De acordo com a ...
Caio Felipe Pereira's user avatar
6 votos

Tem como diminuir este script sem perder a funcionalidade?

você pode fazer da seguinte forma: var topmenu = $("div#contenthead div.topmenu"); var leftSpan $("div#contenthead div.left span"); var listas = {}; var spams = {}; listas.cursos = $("ul.cursos", ...
Tobias Mesquita's user avatar
  • 23,1mil
6 votos
Aceito

Transformar texto para italico on hover!

Não tem como, primeiro porque o único pseudo-elemento que existe para linhas é o ::first-line e ele só vai pegar a primeira linhas, segundo o font-style diferente do font-weight não suporta valores ...
Reptile's user avatar
  • 100mil
5 votos

CSS pegar siblings antes do elemento?

Tenho uma solução que pode servir. Mas tem uns poréns, o container tem que ser exatamente o tamanho dos filhos pra ficar legal. Precisa colocar no pai um hover seguido de uma regra :hover:not() nos ...
hugocsl's user avatar
  • 66,7mil
5 votos
Aceito

Hover de div mudar cor em outros elementos

O seletor > é apenas para selecionar elementos filhos diretos de outro elemento, não para selecionar netos ou bisnetos. Então no seu caso você basicamente precisa remover esse seletor. Veja aqui a ...
hugocsl's user avatar
  • 66,7mil
4 votos

Efeito hover em um elemento afetar outro

Basta você usar o hover na definição do elemento que você quer alcançar no CSS. Pense no hover como um pseudo atributo do elemento. Ele de facto serve para identificar qualquer elemento da mesma forma ...
ndvo's user avatar
  • 308
4 votos

Efeito hover em JS

O evento .hover deve ter 2 funções: uma para quando o mouse estiver sobre o elemento e outra para quando sair. var $JQuery2 = jQuery.noConflict() $JQuery2(function() { $JQuery2("....
Meu ovo's user avatar
  • 80,6mil
4 votos
Aceito

Efeito zoom com CSS

É possível resolver isso usando padding e um pseudo-elemento ::after. Vc tem que tirar a cor de fundo da div imagem e usar o pseudo-elemento como cor de backgroud. Depois faz um ajuste de padding para ...
hugocsl's user avatar
  • 66,7mil
4 votos

CSS pegar siblings antes do elemento?

A resposta do @Bacco está ótima, no entanto aonde existem espaçamentos se passar o mouse acidentalmente neles o :hover ao elemento pai vai ser aplicado: Note como ficou amarelo, no caso do exemplo ...
Reptile's user avatar
  • 100mil
4 votos

Como colocar background-color em cima de background-image

Olá! Você pode usar pseudo elementos como o ::before ou o ::after, segue um exemplo: #background { position: relative; margin: 0 auto; width: 626px; ...
Kamile Pimenta's user avatar
4 votos
Aceito

Espaço indesejado em uma borda com evento hover

Você resolveria o problema aplicando display: block na imagem, ou seja, na classe .bastion-size. Isso porque a tag img é inline, conforme explicado nesta pergunta: Veja: .bastion-container { ...
Meu ovo's user avatar
  • 80,6mil
3 votos

Aparecer uma div com hover

Acho que a maneira mais facil é assim: .nav li a .glyphicon { display:none; } .nav li a:hover .glyphicon { display: inline; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3....
Miguel's user avatar
  • 29,4mil
3 votos
Aceito

Tem como diminuir este script sem perder a funcionalidade?

Aparentemente você possui somente 4 spans dentro da div.left, e quando voçê coloca a class "colorBlue" em uma quer remover de todos as outras. Se este é o caso, e os span só possuem uma única classe, ...
Fernando Mondo's user avatar
3 votos

Efeito hover em JS

Uma opção diferente para o problema é fazer esse efeito direto com CSS usando alguns seletores, que podem ser: .classe ~ .outraClasse {} #se outraClasse é irmao de classe .classe + .outraClasse {} #...
BrTkCa's user avatar
  • 11,3mil
3 votos
Aceito

Div Slider entre imagens on Hover

Você pode fazer com mouseenter (iniciar) e mouseleave (parar) e setInterval que irá fazer o looping alternando entre as imagens. $(document).ready(function(){ var tempo; $("#slider")....
Meu ovo's user avatar
  • 80,6mil
3 votos

porque o hover não sobrepoe a div

Olá, Bruno! Acho que entendi o que você quis dizer, tentei montar o código, espero que seja mais ou menos isso: Código Completo ul { list-style: none; } ul li { width:...
Alexandra's user avatar
3 votos
Aceito

Sombra em svg - CSS

Vc pode usar o filter:drop-shadow do CSS para fazer isso. Assim é possível colocar o filtre em uma imagem.svg ou direto na tag <svg> Veja como fica no exemplo abaixo. OBS1: repare que esse ...
hugocsl's user avatar
  • 66,7mil
3 votos

Mouse Hover não funciona nas células do calendário circular em SVG

Dei uma olhada no código do seu SVG e um dos motivos dele estar GIGANTE é que vc está usando CSS inline, direto em cada um dos vetores tipo style="propriedades" o correto seria vc criar uma classe e ...
hugocsl's user avatar
  • 66,7mil
3 votos

Como colocar background-color em cima de background-image

Olá, a solução da @Kamile esta correta, gostaria de aproveitar para completar com uma sugestão. Caso deseje utilizar além de um background-color com manipulação de opacity, você pode aplicar ele em ...
Getulio Rafael Ferreira's user avatar
3 votos
Aceito

Como colocar background-color em cima de background-image

Olha vou te dar duas opções. O resultado será ese, apesar de serem duas técnicas diferentes o resultado visual é o mesmo: Opção 1 Como vc disse que não era possível fazer com uma div dentro da outra ...
hugocsl's user avatar
  • 66,7mil
3 votos

Como sobrepor flex itens durante um hover em CSS?

Apesar do código não ter ficado muito bonito pq fiz na correria acho que pode te ajudar. A ideia aqui é envolver o input em uma label, por questão de semântica, e tb para poder usar um pseudo ...
hugocsl's user avatar
  • 66,7mil
3 votos
Aceito

Transition não executando ao mesmo tempo em elementos diferentes

Cara vc está com um problema nos seletores, a hierarquia não está legal. Dei uma ajustada tirando o transition do html * e parece que arrumou! EDIT É tb uma questão de performance de seletores, ...
hugocsl's user avatar
  • 66,7mil
2 votos

Tem como diminuir este script sem perder a funcionalidade?

Pra reduzir um pouco pode ser feito assim. $("div#contenthead div.left span.atendimento").hover(function() { $("div#contenthead div.topmenu ul.atendimento").addClass("displayblock"); $("...
HENRIQUE LOBO's user avatar
2 votos
Aceito

Como faço o transition funcionar na "ida e na volta" ao usar hover?

Ponha a transition no objeto original, e não no :hover: .novidades{ display:block; height:100px; width:200px; /* só pra demonstrar */ background-color: #f5dcdc; position: relative; ...
Largato's user avatar
  • 93,2mil

Only top scored, non community-wiki answers of a minimum length are eligible