Ir para conteúdo
Sara Alves

Hover em 2 espaços

Recommended Posts

Olá, estou me matando aqui para entender uma lógica que gostaria que fosse aplicada no meu menu, segue aonde estou parando e não consigo achar uma solução.

https://jsfiddle.net/bandey47/

Notem que ao passar o mouse sobre o link do menu, o background do icone muda para um tom verde, até ai blz, eu gostaria que o fundo do texto mudasse para preto quando houvesse um hover, ou seja, ao passar o mouse sobre o link o background do icone ficaria verde (já está ficando) e juntamente com ele o background do texto ficaria preto.

Porém já fiz trocentos testes mais não consigo a logica de como aplicar um hover desta forma.

Gostaria de sugestões e um auxilio dos colegas, como resolver isso?

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #ccc;

	}
.box {
    width: 20%;
    height: 50px;
    display: flex;
    margin: 15px;
    align-items: center;
    justify-content: center;
    background: white;
    cursor: pointer;
}
.box i {
    background: #fff;
    height: 100%;
    width: 27%;
    text-align: center;
    color: black;
    line-height: 2;
    font-size: 25px;
}
.box:hover i {
    background: #00fff3;
}
.texto {
    width: 100%;
    text-align: left;
    font: 18px 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    text-indent: 17px;
    height: 100%;
    align-items: center;
    display: flex;
}
.box:hover .texto {
    background: black;
    color: white;
}
	@import url(http://fonts.googleapis.com/css?family=Roboto:300);
</style>
</head>
<body>
	<content>
		<div class="box">
			<i class="fa fa-opencart" aria-hidden="true"></i>
			<dvi class="texto">Loja</dvi>
		</div>
		<div class="box">
			<i class="fa fa-opencart" aria-hidden="true"></i>
			<dvi class="texto">Loja</dvi>
		</div>

	</content>
</body>
</html>

Acho que está estudável, boa sorte.

  • Gostei 1
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hora.. Não precisa de uma div para cada coisa é simples veja:

<style>
    .muda_de_cor {
        background-color: red;
        color: blue
    }
    .muda_de_cor:hover {
        background-color: blue;
        color: red 
    }
</style>
<div class="muda_de_cor">TEXTO</div>

 

  • -1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por clickanapolis
      Bom dia, no meu site coloquei ao clicar no link ele vai para uma div dentro da propria pagina, visto que a mesma e uma unica pagina.
       
      O problema é que quando clica no link ele esta parando fora do inicio da div, o que devo fazer?
       
      <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> e chamo o link assim:
       
      <li><a href="#acimetech" class="scroll">A Cimetech</a></li>  
    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por Artes Ussler
      Olá!
       
      Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
       

    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.