Ir para conteúdo

POWERED BY:

Arquivado

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

.:: Pegasus ::.

Metade do texto mudar de cor.

Por , em Desenvolvimento frontend

Recommended Posts

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Pessoal, é o seguinte.

Eu fiz um cabeçalho com um texto escrito "incompleto"

Nesse texto eu quero que o "in" fique azul claro e o "completo" azul escuro e quando se passar o mouse sobre o "completo" ele fique da cor do "in", ou seja, azul claro.

Ai fiz um código mais ou menos assim.

<h1>in<a  id="completo" href="#">completo</a>
Ai que me complicou.

nessa id="completo" eu coloquei a cor de azul escuro e tirei o sublinhado do link.

ficando assim:

#express {	text-decoration:none;	color:#0000FF;}
Agora eu queria saber.. como mudar a propriedade a:hover somente para esse caso.

Eu tentei fazer algo como "#express a:hover {" mas não funcionou não.

Queria saber se tem como fazer isso.

Sem mais. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado 

a#completo:hover {}

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas se você quiser que o in tb faça parte do link, você pode fazer o seguinte:

<h1><a href="#"><span>in</span>completo</a>
CSS:

a {	color: #0bf;	text-decoration: none;}a:hover {	text-decoration: underline;}a span {				/* Aqui você formata o "completo", nem precisa aplicar uma id a ele */	color: #000;}a:hover span {	   /* Aqui você formata quando o mouse está sobre o link */	color: #0bf;}
Exemplo "estruturado":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Teste</title><style type="text/css">h1 a {	color: #0bf;	text-decoration: none;}h1 a:hover {	text-decoration: underline;}h1 a span {	color: #000;}h1 a:hover span {	color: #0bf;}</style></head><body>	<h1><a href="#"><span>in</span>completo</a></h1></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Muito obrigado Inside, me ajudou bastante.Eu achei que a dica que o paulo me deu é bem interessante, pois quando eu passava o mouse sobre o "in" o "completo" voltava ao normal, com essa sua dica ele continua da mesma cor.Vou testar das duas maneiras aqui e ver qual fica melhor.Mais uma vez obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Ah legal...

como é apenas um teste, estava testando apenas com o Firefox. o que fica perfeito. Agora fui testar no Internet Explorer e está uma bosta.

Qual é o procedimento adequado que devo tomar nessa ocasião? Refazer o código?

Bom.. coloquei ele num host grátis para vocês verem como ficou...

http://www.mprcaldeirarias.xpg.com.br/serexpress/index

E a baixo o Código CSS do mesmo.

body {	background:#FFFFFF url(serexpressv4-2.jpg) no-repeat;}h1 a {	text-decoration:none;	color:#e38866;}h1 a:hover {	text-decoration:none;}h1 a span {	text-decoration:none;	color:#a1401D;}h1 a:hover span {	color:#e38866;}hr {	margin-top:-15px;	padding:0px;	background-color:#A1401D;}#geral {	width:500px;	margin-left:10px;	margin-right:400px;	margin-top:40px;	margin-bottom:10px;}#topo {	margin-bottom:0;	color:#E38866;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:20px;	}#menu {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:12px;	margin-top:-13px;	margin-right:0px;	padding:0;}#menu ul {	list-style:none;}#menu ul li {	margin-top:0px;	margin-right:20px;	float:left;}#menu ul li a {	text-decoration:none;	color:#A1401D;}#menu ul li a:hover {	text-decoration:underline;}#conteudo {	margin-top:70px;	margin-left:30px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:10px;	color:#000000;}h3 {	font-family:Verdana, Arial, Helvetica, sans-serif;	color:#A1401D;	margin-bottom:20px;}h3 a {	text-decoration:none;	color:#e38866;}h3 a:hover {	text-decoration:none;}h3 a span {	text-decoration:none;	color:#a1401D;}h3 a:hover span {	color:#e38866;}p a {	text-decoration:none;	color:#e38866;}p a:hover {	text-decoration:none;}p a span {	text-decoration:none;	color:#a1401D;}p a:hover span {	color:#e38866;}/* Documento CSS da página "Ser Express" */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Olha só... Tentei.. Tentei de tudo quanto foi jeito tentar descobrir o pq disso no IE... Mas não consegui... Uma dica: recomece... Vá reconstruindo, passo a passo, tanto o HTML quanto o CSS... Pq a maneira que te passei funciona em qualquer browser... Eu testei no IE6, no FF2 e no Opera 9...Ok? Boa sorte!

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

É... vou refazer o código e dessa vez visualizar quando que haverá conflito entre pelo menos os 2 brownsers.

Assim que descobrir eu posto aqui onde deu esse conflito para que tentamos achar uma solução.

Obrigado e até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Olha só Paulo, eu também tentei, tentei aqui e não consegui descobrir.. Se eu deixar perfeito no IE, fica todo desfigurado no Firefox, porém só mexi no CSS, no HTML eu não consegui ver nada de errado.

Acho que esse problema só se resolve com os Hack's.

Maujor nos Ajude!!

Se vocês quiserem eu posto aqui o CSS e o HTML do site completo para vocês avaliarem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

.:: Pegasus ::.    0

.:: Pegasus ::.
Postado

Beleza. vou deixar os códigos HTML e CSS abaixo e um link para download caso não queiram ficar lendo rs..

 

 

Código CSS

body {	background:#FFFFFF url(serexpressv4-2.jpg) no-repeat;}h1 a {	text-decoration:none;	color:#e38866;}h1 a:hover {	text-decoration:none;}h1 a span {	text-decoration:none;	color:#a1401D;}h1 a:hover span {	color:#e38866;}hr {	margin-top:-15px;	padding:0px;	background-color:#A1401D;}#geral {	width:500px;	margin-left:10px;	margin-right:400px;	margin-top:40px;	margin-bottom:10px;}#topo {	margin-bottom:0;	color:#E38866;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:20px;	}#menu {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:12px;	margin-top:-13px;	margin-right:0px;	padding:0;}#menu ul {	list-style:none;}#menu ul li {	margin-top:0px;	margin-right:20px;	float:left;}#menu ul li a {	text-decoration:none;	color:#A1401D;}#menu ul li a:hover {	text-decoration:underline;}#conteudo {	margin-top:70px;	margin-left:30px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:10px;	color:#000000;}h3 {	font-family:Verdana, Arial, Helvetica, sans-serif;	color:#A1401D;	margin-bottom:20px;}h3 a {	text-decoration:none;	color:#e38866;}h3 a:hover {	text-decoration:none;}h3 a span {	text-decoration:none;	color:#a1401D;}h3 a:hover span {	color:#e38866;}p a {	text-decoration:none;	color:#e38866;}p a:hover {	text-decoration:none;}p a span {	text-decoration:none;	color:#a1401D;}p a:hover span {	color:#e38866;}/* Documento CSS da página "Ser Express" */
Código HTML

<!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=iso-8859-1" /><title>SerExpress - Mais um teste com as CSS's.</title></head><body><div id="geral">	<div id="topo">		<h1><a href="#">ser<span>express</span></a>		</h1>		<hr />	</div>	<div id="menu">			<ul>				<li><a href="#">home</a></li>				<li><a href="#">portifolio</a></li>				<li><a href="#">imagens</a></li>				<li><a href="#">produtos</a></li>				<li><a href="#">serviços</a></li>				<li><a href="#">contato</a></li>			</ul>    </div>	<div id="conteudo">			<h3>bem vindos à <a href="#">ser<span>express</span></a>		</h3>		<hr id="linha"/>		<p>Olá pessoal, é com muito prazer que apresentamos a nossa quarta versão da <a href="#">ser<span>express</span></a>, Um tanto quanto sensual mas sem fugir do foco, que e é os serviços express, constantemente estaremos mudando o visual do site para que não tenham uma imagem padrão do nosso site, por isso, sempre quando puderem venham ver como está o nosso site.		</p>	</div></div></body></html>
Ps: eles não estão linkados pois estava testando antes de enviar.

Link para Download

http://www.mprcaldeirarias.xpg.com.br/serexpress.zip

Vejam o que pode estar errado aew.

Obrigado.

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