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 ...
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;
...
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 :...
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.
}...
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;
...
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 :...
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 ...
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", ...
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 ...
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 ...
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 ...
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 ...
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("....
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 ...
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 ...
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;
...
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 {
...
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....
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, ...
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 {} #...
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")....
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:...
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 ...
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 ...
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 ...
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 ...
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 ...
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, ...
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");
$("...
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;
...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
css-hover × 141css × 100
html × 56
css3 × 43
javascript × 18
html5 × 18
jquery × 9
css-transições × 9
menu × 7
div × 5
css-animations × 5
animação × 4
twitter-bootstrap × 3
imagem × 3
svg × 3
dropdown × 3
sass × 3
eventos-do-mouse × 3
transição × 3
php × 2
bootstrap-3 × 2
front-end × 2
button × 2
scss × 2
css-font-face × 2