Color de Fondo Hover Fade Effect CSS
Primero, soy un principiante. Quiero una instrucción paso a paso.
Quiero agregar un efecto de desplazamiento de fondo suave a mis enlaces en Wordpress
a {
color:#000;}
a:hover {
background-color: #d1d1d1; color:#fff;
}
Quiero que el cursor sobre los enlaces sea lento, en lugar de instantáneo. ¿Necesito JavaScript o jQuery ? Si es así, por favor dime cómo hacerlo.
5 answers
Dado que este es un efecto cosmético, no debería ser demasiado vital que esto se dispare. Teniendo en cuenta que, es posible que desee mirar CSS 3 transformaciones.
a {
color: #000;
transition: background 0.5s linear;
}
a:hover {
background-color: #d1d1d1;
color: #fff;
}<a href="http://example.com">Hover me</a>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-29 11:38:21
El efecto de transición CSS3 funcionaría para lo que está buscando. Usted puede encontrar más información sobre cómo usarlo aquí: http://www.css3.info/preview/css3-transitions/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-09 11:27:47
No puede animar el color de fondo hasta que utilice un complemento. El plug in está diseñado por el mismo tipo que creó jQuery: http://plugins.jquery.com/project/color
Simplemente no lo incluyó porque habría hecho que el archivo js fuera más grande.
Nota: sin embargo, puede cambiar la opacidad.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-08-09 10:41:27
Nota: Esto fue escrito antes de que las transiciones CSS estuvieran ampliamente disponibles (acababan de salir, y el soporte del navegador era insuficiente). Si estabas haciendo esto hoy entonces usa transiciones CSS, y no javascript.
Sí, necesita javascript. jQuery lo hace más fácil.
No estoy seguro de que debas hacer eso como principiante, pero:
Tendrá que incluir la biblioteca jQuery en una etiqueta de script:
<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT>
Entonces:
<SCRIPT type="text/javascript">
$(function() {
$('a').hover(
function() { $(this).animate( { backgroundColor: '#d1d1d1', color: '#fff' } ) },
function() { $(this).animate( { backgroundColor: '', color: '' } ) }
);
});
</SCRIPT>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-09 06:56:09
$(document).ready(function() {
var COLOR = {
fadeBackground: function(config){
var totalStartPoint= config.startRED+config.startGREEN+config.startBLUE;
var totelEndPoint = config.endRED+config.endGREEN+config.endBLUE;
if(totalStartPoint < totelEndPoint){
var clearTime = setInterval(
function (){
//elem.css("background-color", "rgb("+color.startRED+","+color.startGREEN+","+color.startBLUE+")");
document.getElementById('jsFullAccessColor').style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED < config.endRED){
config.startRED++;
}
if(config.startGREEN < config.endGREEN){
config.startGREEN++;
}
if(config.startBLUE < config.endBLUE){
config.startBLUE++;
}
if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){
clearTimer(clearTime);
}
}, config.speed);
}
if(totalStartPoint > totelEndPoint){
var clearTime = setInterval(
function (){
document.getElementById(config.element).style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")";
if(config.startRED > config.endRED){
config.startRED--;
}
if(config.startGREEN > config.endGREEN){
config.startGREEN --;
}
if(config.startBLUE > config.endBLUE){
config.startBLUE--;
}
if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){
clearTimer(clearTime);
}
}, config.speed);
}
}
}
function clearTimer(timerId){
clearInterval (timerId);
}
$(".domEleement").on("click",function (){
var config ={
//color starting point
startRED:172,
startGREEN:210,
startBLUE:247,
//color end point
endRED:255,
endGREEN:255,
endBLUE:255,
//element
element:"jsFullAccessColor",
//speed
speed:20
}
COLOR.fadeBackground(config);
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-25 12:15:46