classe css pour sélectionner du texte dans une div

J'ai un div avec un nom de classe "test". La classe "test" est un pointeur du curseur assigne à celle-ci. En outre, la classe a une largeur fixe de 200px. À l'intérieur de la div est un texte de longueur est inférieure à la largeur de la div. Je ne veux pas le point de faire apparaître lorsque la souris est placée dans la partie vide de la div.

Est-il une manière que je peux attribuer le css pointeur sur le texte à l'intérieur de la div sans habillage du texte à l'intérieur d'un autre <span> tag. Je ne veux pas revenir en arrière et ajouter la balise span pour chaque div et de réécrire le code javascript.

Je pense à quelque chose comme ce pseudo-code css

.test.text {
  cursor:pointer;
}

OriginalL'auteur Jamex | 2011-10-16

  1. 14

    CSS ne fonctionne pas de cette façon. Comme biziclop dit dans les commentaires, les nœuds de texte ne peut pas être sélectionné avec les CSS. Vous devrez vous pour envelopper votre texte dans un <span> et l'utilisation

    .test span {
    cursor: pointer;
}

    Avec

    <div class="test">
    <span>Text</span>
</div>

    Ou un ensemble .test à display: inline, mais qui ne vous laissera pas lui donner une largeur, ce qui n'est pas le comportement que vous voulez. <span>s sont très bien, dans ce cas.

    Les nœuds de texte ne peut pas être sélectionné avec le css: stackoverflow.com/questions/5688712/...
    Merci. Édité dans ma réponse.
    Je ne pense pas que faire .test affichage inline fonctionne ici. Il doit être de 200 pixels de largeur.
    Je n'ai pas non plus. J'aurais été plus clair à cet égard.
    Merci les gars, j'ai essayé de revenir en arrière et ajoutée s'étend à mes textes, mais je n'ai pas encore le souvenir de toutes les différentes fonctions que l'effet le code, donc je pondérée de l'intérêt de passer du temps à peu l'INTERFACE utilisateur vs le coût de passer des heures à tester pour cette. Je suis encore pesée de ma décision.

    OriginalL'auteur Bojangles

  2. 1

    Vous pouvez essayer d'utiliser le :before ou :after pseudo-éléments.

    Je jouais avec cette solution, pour les 1-ligne divs:

    http://jsfiddle.net/yAfKw/

    Multi-ligne divs:

    http://jsfiddle.net/yAfKw/1/

    Fonctionne dans Firefox, ne fonctionne pas dans Safari.

    Grâce biziclop, c'est une super astuce qui pourrait résoudre mon problème, je vais le tester.

    OriginalL'auteur biziclop