7
votes

CSS: Skip Souligner dans une partie du lien

est-il possible d'avoir un lien contigu, où le texte est normalement souligné sur la survol de la souris, mais au milieu dispose d'une section (par exemple une image) sans ce soulignement? Cela ne fonctionne pas:

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

html css image hyperlink underline

0 commentaires

4 Réponses :

2
votes

<html>
<head></head>
  <style>
    a{
       text-decoration:none;
     }

    a:hover
     {
       text-decoration:none;
     }

    .sample
     {
        text-decoration:underline;
     }

    .sample_none
     {
        text-decoration:none;
     }
   </style>
   <script type="text/javascript">
      function show_underline(){
        document.getElementById('sample').className= 'sample';
      }

      function hide_underline(){
        document.getElementById('sample').className= 'sample_none';
      }
   </script>
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>  
    <img src="img.png" style="border:0px;"> three
    </a>


</body>
</html>

5 commentaires

Cela obligera le soulignement d'être sur tout le temps. Et si je fais une classe spéciale pour gérer le vol stationnaire, il rompre le lien contigu.

S'il vous plaît coller votre code après le faire. J'aimerais savoir comment vous gérez le vol stationnaire. Neways vraiment bonne question :)

Salil: Après des tests ultérieurs, j'ai découvert que cela ne résolvait pas mon problème.

Vérifiez mon exemple qui utilise JavaScript.

Votre exemple fonctionne, mais uniquement pour une «partie de texte», car il utilise un ID pour trouver le texte à souligner. En outre, il semble un peu complexe pour une chose aussi simple.

3
votes

a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }

3 commentaires

Comment puis-je faire si je veux souligner sur trois et pas sur deux après avoir plané?

Styles: A, A: Hover {décoration de texte: souligné; } A img, A: Hover img, span.two {décoration de texte: aucun! Important; frontière: 0; } et marquage: une deux trois

Ne peut pas obtenir d'entre eux de travailler. L'image est toujours soulignée.

1
votes

Ce que je voulais vraiment, c'était d'avoir une image "attachée" à des liens, sans qu'il soit souligné sur Hover. Voici une solution que j'ai proposée:

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

le rembourrage-gauche em> est destiné à compenser le texte afin qu'il ne chevauche pas la image. li>
avec position de fond em> vous peut déplacer l'image pour le rendre meilleur aligné sur le texte. li>
Si l'image est plus élevé que le texte TOP-TOP EM> et le rembourrage-fond em> peut être utilisé pour modifier l'apparence. LI> ul>
Cette technique peut également être utilisée avec sprites CSS em> comme ceci: p> xxx pré>
J'ai utilisé une technique similaire pour utiliser des sprites CSS Au lieu d'images intégrées ordinaires: p> xxx pré>
espère que cela aide quelqu'un p> p>

1 commentaires

Enveloppez votre texte en une portée, puis attachez-vous de la classe CSS qui utilise cette technique de Sprite de fond travaillé très bien pour moi.

4
votes

Faites une classe qui se connecte et la classe enfant qui les ajoute.

<a href="#" class="underline-some">
  <span class="text">Boyz</span> ðŸ’ˆðŸ’ˆ
  <span class="text">Men</span>
</a>

1 commentaires

Cela devrait être la réponse acceptée ... Le point étant de supprimer le soulignement de l'élément parent , puis de la réapparaître qu'aux éléments de l'enfant que vous souhaitez souligner.