html - quitar - hacer que un link no cambie de color
Establezca el color del enlace visitado en el color del enlace no visitado(PS no es la pregunta habitual) (10)
Necesito establecer el CSS a: visitado a cualquier color que el normal a esté configurado.
Lo que quiero decirle al navegador es que, para los enlaces visitados, utilice el mismo color que los enlaces no visitados, cualquiera que sea el color .
Necesito hacer esto sin especificar un color en particular.
Por ejemplo, si aparece un navegador extraño que usa "verde" como color para enlaces normales no visitados, este CSS debería indicarle al navegador que use el mismo color verde para los enlaces visitados. Exactamente de qué color es utilizado por el navegador debe ser transparente para mi código ... de ahí la frase "cualquier color".
PD. Sé cómo configurar un: visitado y un color particular. Eso no es lo que estoy preguntando.
PPS Estoy dispuesto a usar JavaScript si es necesario. Pero estoy realmente empeñado en hacer que el navegador haga esto.
¿Por qué querría hacer algo así?
El color azul que IE8 usa para los enlaces es genial. No es # 0000FF. Es un buen tono de azul. Así que quiero configurarlo para los enlaces visitados y no visitados. Pero no debería tomar una captura de pantalla o usar algún complemento para elegir el valor hexadecimal exacto cada vez. Si IE luego cambia el color a otro tono increíble, este código debería funcionar. No quiero volver a encontrar el hexágono y cambiarlo por mi código.
Esta es solo una razón. No me des el hexágono para ese azul. ¡Descubrir eso es fácil, pero esa no sería la respuesta!
No importa esto Ver mi otra respuesta para algo más específicamente relevante para la pregunta del que hace la pregunta.
Hago esto:
a, a:visited { color:#4CA1F6; }
a:hover { color:#4CB6E1; } a:active { color:#0055AA; }
Ahora que este hilo me hace pensar, y he hecho las siguientes mejoras a mi método:
a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus { color:#4CB6E1; }
a:active { color:#0055AA; }
Necesité una solución para hacer, ya que el título de esta pregunta sugiere "Establecer el color del enlace visitado a cualquier color del enlace no visitado". Para mí, necesitaba una forma de realizar una comparación de imágenes de capturas de pantalla de contenido de la página del navegador que utilizo para la prueba de regresión (pdiff - diff perceptual). Aquí está el código que funcionó para mí.
(function(){
var links = document.querySelectorAll(''a'');
for (var i=0; i<links.length; i++) {
var link = links[i];
if (link.href) { //must be visitable
var rules = window.getMatchedCSSRules(link) || [];
var color = ''#0000EE'' //most browsers default a:link color;
for (var j=0; j<rules.length; j++) {
var rule = rules[j];
var selector = rule.selectorText;
color = rule.style[''color''] || color;
}
link.setAttribute(''style'',''color:'' + color + '' !important'');
//this was enough for me but you could add a ''a:visited'' style rule to the rule set
}
}
})();
No creo que haya una forma pura de CSS para lograr esto. Creo que necesitaría usar JavaScript para obtener el color de la a y luego establecer un: visitado a ese color y esto probablemente no funcionaría en todos los navegadores a menos que hubiera una {color: #dea} especificada.
No creo que haya una solución pura de CSS. Por lo general, debe elegir un color y establecer tanto un enlace como un: visitado del mismo color.
Intenté {color: inherit} pero eso fue inútil.
Sin embargo, esta solución jQuery funciona muy bien.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var normalColor = $(''a:link'').css(''color'');
$(''a:visited'').css(''color'', normalColor);
});
</script>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="nowhereyouvebeen">No where you''ve been</a>
</body>
</html>
No hay forma de hacer esto usando CSS. El navegador indica que se ha visitado un enlace basado en una entrada de la base de datos que solo conoce, y luego utiliza los colores predeterminados especificados en la configuración de los navegadores específicos.
CSS físicamente no puede obtener el color de algo en la página. Así es como es. La única forma es usar javascript como la respuesta de Danny Roberts.
La razón por la que creo que su respuesta no está funcionando correctamente es que $(''a:visited'') simplemente selecciona todos los enlaces visitados en ese momento y luego cambia el color para ellos.
Lo que debe hacer es observar los eventos de clic y volver a ejecutar el código cada vez:
var normalColor = $(''a:link'').css(''color'');
$(''a'').click(function() {
$(''a:visited'').css(''color'', normalColor);
});
La secuencia de comandos de Danny Robers funciona para mí en Firefox y Chrome (no estoy seguro acerca de IE).
FWIW, el valor especial HyperlinkText hubiera sido la forma "estándar" de hacer lo que quieras, pero se eliminó de CSS3 en algún momento de la primavera de 2003.
Parece que Firefox es el único navegador que comenzó a implementarlo, porque los siguientes funcionan para Firefox:
a: visited {color: -moz-hyperlinktext; }
Presto:
$(function(){
var sheet = document.styleSheets[document.styleSheets.length-1];
sheet.insertRule(
''a:visited { color:''+$(''a:link'').css(''color'')+''; }'',
sheet.length
);
});
Lo probé y puedo confirmar que funciona en Chrome. Sin embargo, tenga en cuenta a qué sheet está agregando las reglas: asegúrese de que su atributo de medios se aplique a los medios que le interesan. Además, si tiene reglas que anulan el a , es probable que esto no funcione correctamente, así que asegúrese de que sus hojas de estilo estén libres de eso.
No estoy tan seguro de que esta sea una práctica muy sabia de todos modos. Personalmente, siempre defino explícitamente los colores de mis enlaces para cada sitio.
PD:
Aparentemente IE (no sé qué versiones) insiste en su propia sintaxis:
sheet.addRule(''a:visited'', $(''a:link'').css(''color''), -1);
a.one:link {
color:#996600;
background-color:transparent;
text-decoration:underline;
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a.one:visited {
color: #996600;
background-color: transparent;
text-decoration: underline
}
a.one:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:link, a:visited {color: inherit;}
a:hover, a:focus {color:inherit;}
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}
Oh sí.
Lo necesitaba porque algunos enlaces de texto (a diferencia de los enlaces de imagen) eran una parte importante del menú principal de mi proyecto, así que los quiero con MIS colores, ¡no colores de navegador!
Cada enlace estaba encerrado en un grupo de etiquetas ap cuya clase tenía un color particular (MI color) establecido en CSS.