[Pregunta]: Texto tiene un width del 100% sin que yo se lo haya dicho

[Leguim]

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 (html) [Seleccionar] Expandir


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


Código (css) [Seleccionar] Expandir


.ticket_name {
display: block;
color: #999;
font-size: 15px;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
}

.ticket_name:hover {
color: #00ff00;
}


[@XSStringManolo]

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.

[Leguim]

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"

[MinusFour]

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

[Leguim]

h6 también es block por defecto.

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

Gracias, recién lo había descubierto pero muchisimas gracias igual!

[WHK]

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 [Seleccionar] Expandir

<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 [Seleccionar] Expandir

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.