javascript - tag - html title attribute
¿Puedo deshabilitar un CSS: efecto de desplazamiento a través de JavaScript? (9)
En realidad, otra forma de resolver esto podría ser sobrescribir el CSS con insertRule .
Le da la capacidad de inyectar reglas de CSS a una hoja de estilos existente / nueva. En mi ejemplo concreto, se vería así:
//creates a new `style` element in the document
var sheet = (function(){
var style = document.createElement("style");
// WebKit hack :(
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
})();
//add the actual rules to it
sheet.insertRule(
"ul#mainFilter a:hover { color: #0000EE }" , 0
);
Demostración con mi ejemplo original de 4 años: http://jsfiddle.net/raPeX/21/
Estoy tratando de evitar que el navegador use el efecto :hover del CSS, a través de JavaScript.
Establecí los estilos a y a:hover en mi CSS, porque quiero un efecto de desplazamiento, si JS no está disponible. Pero si JS está disponible, quiero sobrescribir mi efecto de desplazamiento de CSS con uno más suave (usando el complemento de color de jQuery, por ejemplo).
Intenté esto:
$("ul#mainFilter a").hover(
function(e){ e.preventDefault(); ...do my stuff... },
function(e){ e.preventDefault(); ...do my stuff... });
También lo intenté con return false; , Pero no funciona.
Aquí hay un ejemplo de mi problema: http://jsfiddle.net/4rEzz/ . El enlace debería desaparecer sin ponerse gris.
Como lo mencionó Fudgey, una solución alternativa sería restablecer los estilos de desplazamiento con .css .css() pero tendría que sobrescribir cada propiedad, especificada en el CSS (ver aquí: http://jsfiddle.net/raPeX/1/ ) . Estoy buscando una solución genérica.
¿Alguien sabe como hacer esto?
PD: No quiero sobrescribir todos los estilos que he configurado para el vuelo estacionario.
Esto es similar a la respuesta de Septik, pero ¿qué pasa con este enfoque? Envuelva el código CSS que desea desactivar mediante JavaScript en las etiquetas <noscript> . De esta forma, si javaScript está desactivado, se usará CSS :hover , de lo contrario se usará el efecto de JavaScript.
Ejemplo:
<noscript>
<style type="text/css">
ul#mainFilter a:hover {
/* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
function(o){ /* ...do your stuff... */ },
function(o){ /* ...do your stuff... */ });
</script>
Intenta solo configurar el color del enlace:
$("ul#mainFilter a").css(''color'',''#000'');
Editar: o mejor aún, use el CSS, como sugirió Christopher
No hay una solución genérica pura de JavaScript, me temo. JavaScript no puede desactivar el estado CSS :hover .
Sin embargo, podría intentar la siguiente solución alternativa. Si no le molesta perder un poco en su HTML y CSS, le ahorrará tener que restablecer cada propiedad de CSS manualmente a través de JavaScript.
HTML
<body class="nojQuery">
CSS
/* Limit the hover styles in your CSS so that they only apply when the nojQuery
class is present */
body.nojQuery ul#mainFilter a:hover {
/* CSS-only hover styles go here */
}
JavaScript
// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.
$(function(){}
$(''body'').removeClass(''nojQuery'');
)
Puede manipular las hojas de estilo y las reglas de hoja de estilo en sí con javascript
var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses ''cssRules''
ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses ''rules''
ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);
Hacer que los atributos sean importantes y hacer que esta sea la última definición de CSS debe anular cualquier definición anterior, a menos que se trate de un objetivo más específico. Es posible que deba insertar más reglas en ese caso.
Recomendaría reemplazar todo :hover propiedades de :hover a :active cuando detecta que el dispositivo admite el toque. Simplemente llame a esta función cuando lo haga touch() .
function touch() {
if (''ontouchstart'' in document.documentElement) {
for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
var sheet = document.styleSheets[sheetI];
if (sheet.cssRules) {
for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
var rule = sheet.cssRules[ruleI];
if (rule.selectorText) {
rule.selectorText = rule.selectorText.replace('':hover'', '':active'');
}
}
}
}
}
}
Usaría CSS para evitar que el evento: hover cambie la apariencia del enlace.
a{
font:normal 12px/15px arial,verdana,sans-serif;
color:#000;
text-decoration:none;
}
Esta simple CSS significa que los enlaces siempre serán negros y no subrayados. No puedo decir a partir de la pregunta si el cambio en la apariencia es lo único que desea controlar.
addClass() el operador CSS not() y la función addClass() jQuery. Aquí hay un ejemplo, cuando haces clic en un elemento de la lista, ya no se desplazará:
Por ejemplo:
HTML
<ul class="vegies">
<li>Onion</li>
<li>Potato</li>
<li>Lettuce</li>
<ul>
CSS
.vegies li:not(.no-hover):hover { color: blue; }
jQuery
$(''.vegies li'').click( function(){
$(this).addClass(''no-hover'');
});
Solo una respuesta más corta ...
Use una segunda clase que solo tiene el elemento estacionario asignado:
HTML
<a class="myclass myclass_hover" href="#">My anchor</a>
CSS
.myclass {
/* all anchor styles */
}
.myclass_hover:hover {
/* example color */
color:#00A;
}
Ahora puede usar Jquery para eliminar la clase, por ejemplo, si se ha hecho clic en el elemento:
JQUERY
$(''.myclass'').click( function(e) {
e.preventDefault();
$(this).removeClass(''myclass_hover'');
});
Espero que esta respuesta sea útil.