elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho  (Leído 858 veces)
Leguim


Desconectado Desconectado

Mensajes: 661



Ver Perfil
[Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« en: 23 Noviembre 2019, 06:14 am »

Buenas noches,
tengo un problema y es que tengo un texto con <span> que con CSS le digo que al momento de pasar el cursor por encima este cambie de color, el problema es que si yo paso el mouse fuera del texto pero en la misma linea de igual forma lo toma como una acción valida.

Por ejemplo:

|Mi texto| <= <span>

Correcto, las dos | | representan el alcance del :hover ahora mi problema es este

|Mi texto                                          | <= <span>

Como pueden ver hay un gran espacio a la derecha que al momento de pasar el cursor en ese espacio vacío, css lo va a tomar como si igual haya hecho hover.

Código
  1. <span class="ticket_name">Texto</span>
  2.  

Código
  1. .ticket_name {
  2. display: block;
  3. color: #999;
  4. font-size: 15px;
  5. font-weight: bold;
  6. margin-top: 5px;
  7. cursor: pointer;
  8. }
  9.  
  10. .ticket_name:hover {
  11. color: #00ff00;
  12. }
  13.  


En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« Respuesta #1 en: 23 Noviembre 2019, 07:28 am »

Por defecto SPAN se muestra inline. Tu lo modificaste a block.
Prueba con display: inline; a ver si te funciona correcto. Si no te convence el resultado puedes usar una imagen y con un poco de edición lo dejas todo a tu gusto. No es lo más eficiente, pero se pueden hacer cosas muy chulas de forma muy sencilla.


En línea

Leguim


Desconectado Desconectado

Mensajes: 661



Ver Perfil
Re: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« Respuesta #2 en: 23 Noviembre 2019, 15:35 pm »

Igualmente si es un <h6> va a pasar lo mismo.

Pueden probar el código http://www. (tapo url por las dudas ya que no conozco los terminos del foro) escriban lo que yo les dije

<span class="ticket_name">Texto</span>

y en CSS
.ticket_name {
     display: block;
      font-family: opensans;
      color: #242424;
      font-size: 15px;
      font-weight: bold;
      margin-top: 5px;
      cursor: pointer;
   }

      .ticket_name:hover {
         color: #24753e;
      }

y van a ver a lo que me refiero.

Edit: Ya lo solucione, era lo contrario... poner "inline-block"
« Última modificación: 23 Noviembre 2019, 16:18 pm por MiguelCanellas » En línea

MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.114


I'm fourth.


Ver Perfil WWW
Re: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« Respuesta #3 en: 23 Noviembre 2019, 16:09 pm »

Igualmente si es un <h6> va a pasar lo mismo.

Pueden probar el código http://www.cssdesk.com/ escriban lo que yo les dije

<span class="ticket_name">Texto</span>

y en CSS
.ticket_name {
     display: block;
      font-family: opensans;
      color: #242424;
      font-size: 15px;
      font-weight: bold;
      margin-top: 5px;
      cursor: pointer;
   }

      .ticket_name:hover {
         color: #24753e;
      }

y van a ver a lo que me refiero.

h6 también es block por defecto.

https://jsfiddle.net/wb1nqjat/embedded/result
En línea

Leguim


Desconectado Desconectado

Mensajes: 661



Ver Perfil
Re: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« Respuesta #4 en: 23 Noviembre 2019, 16:19 pm »

h6 también es block por defecto.

https://jsfiddle.net/wb1nqjat/embedded/result

Gracias, recién lo había descubierto pero muchisimas gracias igual!
 ;-)
En línea

WHK
CoAdmin
***
Desconectado Desconectado

Mensajes: 6.483


The Hacktivism is not a crime


Ver Perfil WWW
Re: [Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho
« Respuesta #5 en: 23 Noviembre 2019, 20:27 pm »

Si solo quieres que la acción sea sobre el texto y no el bloque debes dar una acción al texto y no al bloque completo:

Código:
<h1>
    <span>Texto</span>
</h1>

Suponiendo que h1 es tu texto en bloque y span será el que active la funcionalidad de cambio de color, entonces desde la hoja de estilo le das un:

Código:
h1 > span:hover{ ... }

Recuerda que puedes tener un span dentro de otro span. No te recomiendo que span sea de tipo bloque, para eso ya existen otros tipos de tags como h* y p.

Saludos.
En línea

Telegram: @WHK102 - Semáforo Epidemiologico Chile
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines