Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RobertoPC

Sublinhado do link

Por , em Desenvolvimento frontend

Recommended Posts

RobertoPC    0

RobertoPC
Postado

Olá!

 

Em alguns sites que acesso vejo o efeito hover do link com uma variação de cores. O texto aparece de uma cor enquanto o sublinhado aparece com outra cor(exemplo: texto -> azul e sublinhado -> vermelho), gostaria de saber que tipo de comando ou tecnologia é usado para criação de tal efeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

esta aplicação geralmente é por CSS

 

tipo assim:

p a{
color:#f00;
}
p a:hover{
color:#00f;
}
p b a{
color:#fc0;
}
p b a:hover{
color:#dc0;
}

HTML:

<p>bla bla <a href="#">primeiro link</a> bla bla <b><a href="#">link-me</a></b> bla bla bla</p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu cheguei à pensar nisso tb, silver, mas veja bem, ele disse: "exemplo: texto -> azul E sublinhado -> vermelho"

Ou seja, ao mesmo tempo, ele quer um hover com o texto de uma cor e o sublinhado em outra, se eu entendi bem.

 

Na verdade, o sublinhado faz parte do texto, portanto, se você mudar a cor do texto, a cor do sublinhado "muda junto".

Via CSS, somente com códigos creio que não seja possível, mas com algumas imagens você consegue fazer qualquer coisa. Seria com CSS tb.

 

Só para lembrar a regra que coloca ou tira o sublinhado é essa:(adicionando e usando os códigos do silverfox)

p a{
color:#f00;
text-decoration: none; /*sem sublinhado no estado normal*/
}
p a:hover{
color:#00f;
text-decoration: underline; /*no hover, com sublinhado*/
}
Depois se você achar, poste um link para o site em que você viu tal efeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

nss, não entendi o que o silverfox fez

 

 

mas ao meu ver, esse link com sublinhado de outra cor não pode ser feito com TEXT-DECORATION, ja que a decoração segue a cor do link.

 

portando fiz um exemplo aqui usandor BORDER-BOTTOM. simples e funcional.

 

 

se eu entendi certo a dúvida do maninho é isso ai.

 

 

abraço

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


	<style type="text/css">
		a {
			color:blue;
			text-decoration:none;
			border-bottom:1px solid red;
		}

		a:hover {
			color:red;
			border-bottom:1px solid blue;
		}
	</style>
</head>

<body>
	<a href="#">Teste</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoPC    0

RobertoPC
Postado

Olá!

Em relação ao TEXT-DECORATION eu também tentei técnicas para utilização deste efeito. Sendo que em alguns site que visitei o efeito aparece como descrevi, tentei a criação até de efeitos com javascript mas não obtive nenhum resultado. Willian muito legal o que você inseriu esta de parabéns. Mas fica um espaço entre o sublinhado o texto que não é legal. Poderia me informar uma forma que eu possa retirar esse espaçamento entre o texto e o sublinhado? Eu tentei com padding e margin mas não obtive sucesso.

 

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

WillianAndrade    0

WillianAndrade
Postado

falai roberto

 

cara, quebrei a cabeça, mas encontrei uma solução

 

ve se te ajuda

 

 

[]'s

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


	<style type="text/css">
		a {
			color:blue;
			text-decoration:none;
			border-bottom:1px solid red;
				height:16px; /* propriedade declarada, utiliza para controlar altura do traço */
				float:left; /* propriedade declara */
		}

		a:hover {
			color:red;
			border-bottom:1px solid blue;
		}
	</style>
</head>

<body>
	<a href="#">Teste</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoPC    0

RobertoPC
Postado

falai roberto

 

cara, quebrei a cabeça, mas encontrei uma solução

 

ve se te ajuda

 

 

[]'s

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


	<style type="text/css">
		a {
			color:blue;
			text-decoration:none;
			border-bottom:1px solid red;
				height:16px; /* propriedade declarada, utiliza para controlar altura do traço */
				float:left; /* propriedade declara */
		}

		a:hover {
			color:red;
			border-bottom:1px solid blue;
		}
	</style>
</head>

<body>
	<a href="#">Teste</a>
</body>
</html>

Olá,

 

Ai cara ajudou muito, obrigado!

 

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito