Ayuda con votaciones y fondo de color en HTML

  • Autor Autor Sauron
  • Fecha de inicio Fecha de inicio
Sauron

Sauron

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas a todos!

Tengo un problema y es que no he conseguido que se quede el fondo del mismo color que cuando pasar el raton por encima...

Alguien me puede ayudar? Tambien queria aprobechar para saber si alguien sabe de algun sistema de votacion para blogger que puedas controlar tu las votaciones, no otra pagina externa a ti.

Gracias 😀

Insertar CODE, HTML o PHP:
<!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>Documento sin título</title>


<style>
ul.actions {
padding: 0;
list-style-type: none;
margin: 10px 0 -1px;
overflow: hidden;
border-radius: 5px;
background-color: #F4F4F4;
border: 1px solid #DDD;
box-shadow: 0 0 0 1px white inset, 0 1px 2px #EEE;
-moz-box-shadow: 0 0 0 1px #fff inset, 0 1px 2px #eee;
-webkit-box-shadow: 0 0 0 1px white inset, 0 1px 2px #EEE;
margin-bottom:21px;
}
ul.actions li {
float: left;
margin: 0;
border-bottom: none;
}
ul.actions li a {
text-indent: -33px;
overflow: hidden;
width: 122px;
height: 50px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
display: block;
border-right: 1px solid #DDD;
color: #AFAFAF;
text-decoration: none !important;
}
ul.actions li a:hover {
background-color: #E4E4E4;
border-radius: 5px 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
ul.actions li a:active {
background-color: #E4E4E4;
border-radius: 5px 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
ul.actions li a.lala {
border:0;
}
ul.actions li a span {
display: block;
width: 22px;
height: 22px;
background: url(http://9gag.com/img/sprite_v13.png) no-repeat;
margin: 14px auto;
}
ul.actions li a.love span {
background: url(http://9gag.com/img/sprite_v13.png) 0 -150px no-repeat;
}
ul.actions li a.unlove span {
background:url(http://9gag.com/img/sprite_v13.png) -22px -150px no-repeat;
}
ul.actions li a.omg span {
background:url(http://celulea.net/img/omg.png) no-repeat;
width:22px;
}
ul.actions li a span {
display: block;
width: 22px;
height: 22px;
background: url(http://9gag.com/img/sprite_v13.png) no-repeat;
margin: 14px auto;
}
ul.actions li a.comment span {
background: url(http://9gag.com/img/sprite_v13.png) -44px -150px no-repeat;
}

</style>

</head>

<body>

<ul class='actions'>
<li>
<a class='unlove badge-vote-up ' href='javascript:upvote(1);' id='downvote'>
<span>+1</span></a>
</li>
<li>
<a class='love badge-vote-up ' href='javascript:upvote(6);' id='upvote'>
<span>+6</span></a>
</li>
<li onclick="this.className='actions'; return false;"  >
<a class='omg badge-vote-up lala ' href='javascript:upvote(10);' id='omgvote'>
<span>+10</span></a>
</li>
</ul>


</body>
</html>
 
Deja hecho un vistazo, 😛irate:
Buenas a todos!

Tengo un problema y es que no he conseguido que se quede el fondo del mismo color que cuando pasar el raton por encima...

Alguien me puede ayudar? Tambien queria aprobechar para saber si alguien sabe de algun sistema de votacion para blogger que puedas controlar tu las votaciones, no otra pagina externa a ti.

Gracias 😀

Insertar CODE, HTML o PHP:
<!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>Documento sin título</title>


<style>
ul.actions {
padding: 0;
list-style-type: none;
margin: 10px 0 -1px;
overflow: hidden;
border-radius: 5px;
background-color: #F4F4F4;
border: 1px solid #DDD;
box-shadow: 0 0 0 1px white inset, 0 1px 2px #EEE;
-moz-box-shadow: 0 0 0 1px #fff inset, 0 1px 2px #eee;
-webkit-box-shadow: 0 0 0 1px white inset, 0 1px 2px #EEE;
margin-bottom:21px;
}
ul.actions li {
float: left;
margin: 0;
border-bottom: none;
}
ul.actions li a {
text-indent: -33px;
overflow: hidden;
width: 122px;
height: 50px;
-webkit-transition: background-color .2s linear;
-moz-transition: background-color .2s linear;
display: block;
border-right: 1px solid #DDD;
color: #AFAFAF;
text-decoration: none !important;
}
ul.actions li a:hover {
background-color: #E4E4E4;
border-radius: 5px 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
ul.actions li a:active {
background-color: #E4E4E4;
border-radius: 5px 0 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
-webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
ul.actions li a.lala {
border:0;
}
ul.actions li a span {
display: block;
width: 22px;
height: 22px;
background: url(http://9gag.com/img/sprite_v13.png) no-repeat;
margin: 14px auto;
}
ul.actions li a.love span {
background: url(http://9gag.com/img/sprite_v13.png) 0 -150px no-repeat;
}
ul.actions li a.unlove span {
background:url(http://9gag.com/img/sprite_v13.png) -22px -150px no-repeat;
}
ul.actions li a.omg span {
background:url(http://celulea.net/img/omg.png) no-repeat;
width:22px;
}
ul.actions li a span {
display: block;
width: 22px;
height: 22px;
background: url(http://9gag.com/img/sprite_v13.png) no-repeat;
margin: 14px auto;
}
ul.actions li a.comment span {
background: url(http://9gag.com/img/sprite_v13.png) -44px -150px no-repeat;
}

</style>

</head>

<body>

<ul class='actions'>
<li>
<a class='unlove badge-vote-up ' href='javascript:upvote(1);' id='downvote'>
<span>+1</span></a>
</li>
<li>
<a class='love badge-vote-up ' href='javascript:upvote(6);' id='upvote'>
<span>+6</span></a>
</li>
<li onclick="this.className='actions'; return false;"  >
<a class='omg badge-vote-up lala ' href='javascript:upvote(10);' id='omgvote'>
<span>+10</span></a>
</li>
</ul>


</body>
</html>
 
Muchas gracias! Te lo agradezco un monton 🙂

---------- Post agregado el 14-oct-2013 hora: 14:35 ----------

Te lo has podido mirar ?

Deja hecho un vistazo, 😛irate:
 
No puede quedar el fondo de igual color debido a que el código es solo CSS, CSS solo opera con atributos de lectura en imagen... no guarda base de datos ni mucho menos, lo que debes hacer es utilizar otros elementos que guarden la acción seleccionada... cosa de que se modifique el código y así puedas asignarle una clase css al código nuevo


ejemplo un checkbox, si tu presionas el checkbox queda como "active", si queda como active, puedes utilizar la clase del css en activo para cambiar completamente su diseño...

en esta web puedes notar que usan checkbox para hacer un boton tipo Switch, el cual al presionarlo queda activo y la clase css cambia completamente: On/Off Flipswitch HTML5/CSS3 Generator - Proto.io
 

Temas similares

Atrás
Arriba