Pesquisar na Comunidade
Mostrando resultados para as tags ''hover''.
Encontrado 17 registros
-
Olá pessoal tudo bem ? Gostaria de adicionar uma borda a um objeto passando o mouse em cima do mesmo usando o parâmetro hover sem que alterasse a posição dos outros ao lado ( sem ficar tremendo o layout) abaixo está o código. Alguém consegue me dar uma ajuda ? <html> <head> <title></title> <style type="text/css"> .quadrado{ width: 100px; height: 100px; background-color: grey; display: inline-block; margin:2px; } #container{ width: 320px; } .quadrado:hover{ border: 4px solid black; box-sizing: border-box; } </style> </head> <body> <div id="container"> <div class="quadrado">Primeiro</div> <div class="quadrado">Segundo </div> <div class="quadrado">Terceiro </div> <div class="quadrado">Quarto</div> <div class="quadrado">Quinto</div> <div class="quadrado">Sexto</div> <div class="quadrado">Sétimo</div> <div class="quadrado">Oitavo</div> <div class="quadrado">Nono</div> </div> </body> </html>
-
Hover com tamanhos diferentes no menu principal e submenus
Clovis Alberto Block postou um tópico no fórum HTML e CSS
Olá amigos, Baixei o código de um "mega menu" e passei a adapta-lo às minhas necessidades. O problema que não consigo resolver é acertar os tamanhos do hover, nos menus secundários está ok, porem no menu principal o hover está maior do que cada item de menu, executando o código é fácil perceber, basta navegar no menu principal que o problema já é percebido. Tenho a impressão que o menu principal "herdou" dos menus secundários o tamanho do hover. Gostaria de deixar o tamanho do hover no menu principal proporcional ao comprimento de cada texto. Estou anexando os arquivos, inclusive nos mesmos deixei minhas tentativas de acerto em forma de comentários. Sou novo em HTML/CSS, então se virem código ruim, fiquem à vontade para opinar. Por favor, expliquem como se eu tivesse 08 anos rsrsrsr... P.S: Como faço para anexar meus arquivos fonte html e css3? Desde já agradeço. Clovis Alberto Block -
Exibir/esconder checkbox dentro de TD/TR usando hover
FabianoSouza postou um tópico no fórum HTML e CSS
Toda 1ª TD da TR tem um checkbox. Quero que, ao passar o mouse sobre a TR (ou qualquer TD da TR) o checkbox seja exibido. E depois, ao sair da TR, o checkbox volte o seu estado original (oculto). Isso não está funcionando... input[type=checkbox] fieldset[id="atividades-candidato"]table tr td:hover{ display:inline; } -
BOA NOITE PESSOAL, ESTOU CRIANDO UM SITE E SOU BEM LEIGO AINDA PODERIAM ME AJUDAR? QUERO COLOCAR ÍCONES NO MENU AO INVÉS DE ESCREVER! PESQUISEI NA INTERNET O COMANDO SPAN QUE SERIA POSSÍVEL EXECUTAR ESSA AÇÃO, POREM NÃO ESTA FUNCIONANDO EM NENHUM DOS NAVEGADORES. SOMENTE O MOZILA QUE RECONHECE O COMANDO "HOVER" O CHROME E EXPLORE NÃO RECONHECE O HOVER E NEM SPAN. SE PODEREM ME DAR UMA FORÇA O CODIGO ESTA LOGO A BAIXO.. OBRIGADO!! ARQUIVO HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>WA STORES</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="logo"> <img src="C:\Users\Anderson\Desktop\wa\img\wa stores.png"/> </div> <div id="menu"> <ul> <li><span class="face"></span><a href="#">home</a></li> <li><a href="#">home</a></li> <li><a href="#">home</a></li> </ul> </div> </body> </html> ===================================================================================== ARQUIVO CSS @charset "UTF-8"; *{margin: 0;padding: 0;} #logo{position: absolute; left: -480px; top: -200px;} #menu {width: 100%; height: 60px; background: #000000 ; margin: 0; float: left;}/* fundo menu */ #menu ul {float: left; list-style: none; margin: 0; padding: 0; width: 100%; } /* posição menu left right*/ #menu ul li {float: left; font: 16px roboto;}/* posição menu top low */ #menu ul li:hover {background: #eee;} #menu ul li a { color: #888;text-decoration: none; padding: 20px; display: block;} #menu ul li .face{background: url(C:\Users\Anderson\Desktop\wa\img\home.png); float: left; width: 100%; padding:0; margin-bottom: 0; }
-
E ai pessoal, não sei se deveria postar na area de wordpress, mas bora la. Eu adicionei mais um itei em um menu php <div class="nav-categories"> <ul> <?php $category_id = get_cat_ID('noticias'); $category_noticias_link = get_category_link($category_id); $category_noticias_child = count(get_posts('category='. $category_id)) > 0; $category_id = get_cat_ID('painelfiscal'); $category_painelfiscal_link = get_category_link($category_id); $category_painelfiscal_child = count(get_posts('category='. $category_id)) > 0; ?> <?php if (is_category('noticias')) { ?> <li><a href="/">Artigos</a></li> <?php if ($category_noticias_child) { ?> <li class="active"><a href="<?php echo esc_url( $category_noticias_link ); ?>">Notícias</a></li> <?php } ?> <?php if ($category_painelfiscal_child) { ?> <li><a href="http://blog.ativore.com/category/painel-fiscal/">Painel Fiscal</a></li> <?php } ?> <?php } elseif(is_category('tutoriais')) { ?> <li><a href="http://blog.ativore.com/category/artigos/">Artigos</a></li> <?php if ($category_noticias_child) { ?> <li><a href="<?php echo esc_url( $category_noticias_link ); ?>">Notícias</a></li> <?php } ?> <?php if ($category_painelfiscal_child) { ?> <li><a href="http://blog.ativore.com/category/painel-fiscal/">Painel Fiscal</a></li> <?php } ?> <?php } elseif(!is_category('imprensa')) { ?> <li class="active"><a href="http://blog.ativore.com/category/artigos/">Artigos</a></li> <?php if ($category_noticias_child) { ?> <li><a href="<?php echo esc_url( $category_noticias_link ); ?>">Notícias</a></li> <?php } ?> <?php if ($category_painelfiscal_child) { ?> <li><a href="http://blog.ativore.com/category/painel-fiscal/">Painel Fiscal</a></li> <?php } ?> <?php } ?> </ul> </div> no caso é o PAINEL FISCAL, até ai blz, tudo funcionando certinho, menos o hover! Quando clico na aba PAINEL FISCAL ele carrega os posts certinhos, porem o hover fica na aba ARTIGOS Eu não sou programador, então to tomando uma surra a semanas e não consigo fazer isso funcionar, alguém poderia me ajudar?
-
Olá pessoal... Estou tendo um problema em criar um botão com fundo animado usando css e html queria fazer um botão parecido com esse aqui é o sweep to right EXEMPLO Quero fazer so com css e html
-
Imagem aparecendo após passar o mouse sobre um texto (ou link)
natanpereira93 postou um tópico no fórum HTML e CSS
Galera, sou meio novato na área. Estou fazendo um site para uma pizzaria e preciso que ao passar o mouse encima de uma pizza no cardápio do site (texto) aparece a imagem da pizza relacionada... Alguém sabe um código bem simples pra não me dar dor de cabeça? Sei que é algo com o hover mais tentei vários exemplos e nenhum deu certo. Qualquer ajuda é válida. Obrigado desde já! -
hover COMO AFETAR MAIS DE UM ELEMENTO COM A TAG HOVER
william_developer postou um tópico no fórum HTML e CSS
Pessoal; boa noite! A pergunta já meio intuitiva mais vou compartilhar o código. Eu tentei assim, porém não deu heheheheh. Quando o mouse está sobre o elemento ESCURECER1 dou um OPACITY no elemento MAQUINA1 e mudo a cor da fonte da DIV ESCURECER1. Alguém poderia me ajudar ? Thx. #escurecer1:hover #maquina1{ opacity: 0.5; transition: 1s; #escurecer1 color: #546; } -
Esotu com um problema no meu código, quando eu posiciono o mouse em cima da imagem o hover dela não aparece, já até coloquei um valor absurdo de z-index, achando que o problema era esse mas não resolveu, e a classe está sendo ativada quando eu olho o console, mas não aparece .content-area .entry-thumb { text-align: center; transition: all 1s ease-in; } .content-area .entry-thumb:hover { background-color:rgba(255,255,255,0.7); z-index:1000000; } <article id="post-106" class="post-106 post type-post status-publish format-image has-post-thumbnail hentry category-newborn post_format-post-format-image"> <div class="entry-thumb"> <a href="http://brunooliveirafotoedesign.esy.es/newborn/newborn-samuel/" title="Newborn Samuel"><img width="830" height="553" src="http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-830x553.jpg" class="attachment-sydney-large-thumb size-sydney-large-thumb wp-post-image" alt="" srcset="http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-830x553.jpg 830w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-300x200.jpg 300w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-768x512.jpg 768w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-230x153.jpg 230w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-350x233.jpg 350w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n-480x320.jpg 480w, http://brunooliveirafotoedesign.esy.es/wp-content/uploads/2017/04/17554051_1804160642931324_7776911605029775934_n.jpg 960w" sizes="(max-width: 830px) 100vw, 830px" /></a> </div> <header class="entry-header"> <h2 class="title-post entry-title"><a href="http://brunooliveirafotoedesign.esy.es/newborn/newborn-samuel/" rel="bookmark">Newborn Samuel</a></h2> </header><!-- .entry-header --> <div class="entry-post"> </div><!-- .entry-post --> <footer class="entry-footer"> <span class="edit-link"><a class="post-edit-link" href="http://brunooliveirafotoedesign.esy.es/wp-admin/post.php?post=106&action=edit">Edit</a></span> </footer><!-- .entry-footer --> </article><!-- #post-## -->
-
Estou tentando desenvolver um esquema de avaliação de arquivos que estão hospedados no site do meu cliente. Cada arquivo ganha além do link de acesso uma DIV com as cinco opções de avaliação, que aparecem como estrelas em cinza. Eis o código: <div style="margin-top: -2px"> <?php for($s=1;$s<=5;$s++){ ?> <img id="Estrela<?php echo $s; ?>" class="starClick" onclick="javascript:vota(<?php echo $s; ?>)" src="http://meusite.com.br/star2.png" <?php if($s==1){ echo "style='margin-left: 5px'"; } ?> /> <?php } ?> </div> E o código Javascript, quando ao passar por uma estrela ela muda de cor. E ao clicar, ele avisa qual das cinco opções que você votou: <script type="text/javascript"> $('.starClick').hover(function() { $(this).attr('src', 'http://meusite.com.br/star1.png'); }, function() { $(this).attr('src', 'http://meusite.com.br/star2.png'); }); function vota(val){ if(val == '1'){ alert('Você votou HORRÍVEL'); } else if(val == '2'){ alert('Você votou RUIM'); } else if(val == '3'){ alert('Você votou MÉDIO'); } else if(val == '4'){ alert('Você votou BOM'); } else if(val == '5'){ alert('Você votou ÓTIMO'); } } </script> Existe algum modo prático de melhorar a função hover nesse caso? Seria mais ou menos assim: - Passa pela estrela 5 e todas mudam de cor. - Passa pela estrela 4 e só as estrelas 1, 2, 3 e 4 mudam de cor. - Passa pela estrela 3 e só as estrelas 1, 2 e 3 mudam de cor. - Passa pela estrela 2 e só as estrelas 1 e 2 mudam de cor. - Passa pela estrela 1 e só ela muda de cor. Porque no momento, só a respectiva estrela muda de cor quando se passa por ela. Alguém sabe?
-
Olá galera, eu gostaria usar esse efeito no meu projeto, quando o usuário passa o mouse, a foto recebe essa camada por cima com as opções de alguns botões dentro (que serão como o exemplo, as redes sociais). O problema é que não sei como faz, nem sequer sei o nome do efeito. O exemplo de como eu quero tá no link abaixo, na sessão "OUR TEAM" na home mesmo, ou clicando no menu superior em "TEAM": http://creativelycoded.com/demos/eDental/
-
Hover do menu continue selecionada enquanto navego pelo submenu
mpsouzaa postou um tópico no fórum HTML e CSS
Olá, sou novo tanto no fórum quanto no desenvolvimento de sites e estou com uma dúvida que talvez seja simples de solucionar. Preciso fazer com que o hover do menu permaneça selecionado enquanto o mouse está na ul do submenu. Segue o código: <nav> <ul class="menu"> <li class="active"><a class="active" href="#">EMPRESA</a> <ul class="submenu"> <li><a class="selection" href="#">RESUMO</a></li> <li><a href="#">VENDAS</a></li> <li><a href="#">COMPRAS</a></li> <li><a href="#">ORÇAMENTO</a></li> <li><a href="#">RELATÓRIOS</a></li> </ul> </li> </ul> </nav> css: .menu{ margin: 0; padding: 0; list-style: none; width: 980px; margin: auto; position: relative; z-index: 1; } .menu li { float: left; margin-left: 2px; } .menu li a{ display: inline-block; padding: 6px 20px; color: #FFF; text-decoration: none; font-size: 13px; font-weight: 500; background-color: #23A4CE; -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid #23A4CE; border-bottom: none; } .menu li a:hover, .menu li a.active { background-color: #E2E7EA; color: #222; border: 1px solid #c4c4c4; border-bottom: none; } .menu li:hover ul, .menu li.active ul{ display: block; } .menu li a.cap { background-color: #222; border: 1px solid #222; border-bottom: none; } .menu li a.cap:hover { background-color: #E2E7EA; color: #222; border: 1px solid #c4c4c4; border-bottom: none; } .submenu{ list-style: none; position: absolute; float: left; background-color: #E2E7EA; width: 1022px; ; display: none; padding-left: 30px; } .submenu li{ float: left; margin: 0; } .submenu li a{ background-color: transparent; border: none; color: #7F888A; padding: 9px 15px; font-size: 11px; } .submenu li a:hover{ border: none; } .menu li:hover ul, .menu li.over ul{ display: block; } .submenu li a.selection{ color: #23A4CE; } -
Ola gente. Estou tentando fazer uma loja e preciso saber, como fazer para que a minha div apareça apenas uma vez no hover. meu problema. é que quando eu passo o mause varias vezes na div ela fica aparecendo varias vezes. preciso fazer igual esse site aqui https://www.useverso.com/ . quando passo o mause na roupa ai aparece uma vez so o valor do produto. seria mais ou menos desse jeito . desde já obrigado.
-
Pessoal, estou tentando criar um a:hover para o código abaixo via css, mas não vai, não ativa, mesmo que eu modifique as divs e faça trocentas coisas, não vai. Já mudei o código, já tentei alterar pra que o java forneça isso, mas não vai. Alguém saberia como fazer? <!--Script revelar esconder Inicio --> <script type='text/javascript'> $(document).ready(function() { $(".mostrar").hide(); $(".ocultar").click(function() { $(this).next(".mostrar").slideToggle(900); }); }); </script> <!--Script revelar esconder Final--> O código do tema: <div class="ocultar"><?php comments_number(__('Comentários'), __('1 comentário'), __('% comentários'),'closedcomt', __('Comentários Fechados')); ?></div> css: .mostrar {float: right; width: 760px;} .ocultar {width:140px; height:20px; text-align:center; color: #2c2b45; cursor:pointer; background: #7bdba0;} .ocultar a:hover {color: #FF6C00;}
-
Quero que as imagens dessa página: http://www.canatibago.com.br/novo/quem-usa/ ao clicar abra tipo um "pop up" , estilo lightbox, ao invés da maneira que está agora, quando clica abre a imagem sozinha e sai do site. Site rodando em wordpress, tem algum plugin que faça isso automaticamente ?
-
Olá galera, então estava fuçando um site e achei bem bacana algo que ele faz, pode parecer muito simples, mas gostei muito! O site é http://descomplica.com.br/, rolando um para baixo podemos ver que tem uma categoria Disciplinas, e que ao passar o mouse por cima, aparece um certo tipo de conteúdo, com opacidade. Eu estava querendo utilizar o mesmo método, uma vez que passar o mouse por cima, aparecerá algo por cima.
-
Executar função com evento hover e desabilitar ao tirar o mouse
maykon343 postou um tópico no fórum Javascript
Boa tarde, alguém pode me ajudar por favor.... Gostaria de executar a função resizable() do jquery UI, mas somente quando o usuario passar ou mouse no elemento e quando tirar o mouse desabilitar a função.
