Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/04/2016, 05:41
matake
 
Fecha de Ingreso: mayo-2013
Mensajes: 191
Antigüedad: 11 años
Puntos: 10
problema link boton redondo

Hola,

Lo que intento hacer es un boton redondo en html - css que muestre en su interior un icono svg al cual se le puede cambiar el color fill dinamicamente (mouseover etc )
y todo esto dentro de una etiqueta a para ponerle un link.

Lo he conseguido de la siguente manera

Se puede ver en funcionamiento en un fiddle aqui

Código CSS:
Ver original
  1. .contenedor, .div_redondo, svg{
  2.     display: inline-block;
  3.     width: 25px;
  4.     height: 25px;
  5. }
  6. .div_redondo{
  7.     border-radius: 50%;
  8.     vertical-align: middle;
  9.     background: #000;
  10. }
  11. svg{
  12.     position: relative;
  13.     bottom: 25px;
  14.     fill: #fff;
  15. }
(he puesto dos botones iguales porque otros tienen el svg mas extenso )
Código HTML:
Ver original
  1. <a href="mi_link">
  2.     <div class="contenedor">
  3.         <div class="div_redondo"></div>
  4.         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
  5.     </div>
  6. </a>
  7.  
  8. <a href="mi_link">
  9.     <div class="contenedor">
  10.         <div class="div_redondo"></div>
  11.         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="9 9 46 46"><g><polygon points="44,31 33,31 33,20 31,20 31,31 20,31 20,33 31,33 31,44 33,44 33,33 44,33"></polygon></g></svg>
  12.     </div>
  13. </a>

Hasta aqui todo parecia correcto hasta que me di cuenta que al mover el cursor por debajo del boton creado ( como un centimetro mas abajo ) el cursor se volvia manita como si la etiqueta a estuviese dos veces. Una vez sobre el boton y otra vez un poquito mas abajo pero sin nada visible ... solo al mover el raton se podia detectar.

Otra curiosidad es que esto no pasaba con el internet explorer.

He aislado el codigo de los botones que tenia para hacer pruebas y he encontrado otra curiosidad

yo tenia el html del boton que puse arriba generado dinamicamente sin espacios y saltos de linea pero nada mas al ponerlos en varias lineas me sale un simbolo "-" por debajo de los botones que creo que es el responsable de todo esto



¿Sabe alguien como resolver esto aunque sea de otra forma pero que funcione correctamente?

Gracias

Última edición por matake; 16/04/2016 a las 06:44