Вопросы Теги

CSS: Пропустите подчеркивание в части ссылки

Действительно ли возможно иметь непрерывную ссылку, где текст обычно подчеркивается на парении мыши, но в середине имеют раздел (например, изображение) без этого подчеркивания? Это не работает:

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>
6
задан Biggles 4 June 2010 в 07:35
поделиться

3 ответа

На самом деле я хотел, чтобы изображение «прикреплялось» к ссылкам, чтобы оно не подчеркивалось при наведении курсора. Вот решение, которое я придумал: 

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>
  • padding-left предназначен для смещения текста, чтобы он не перекрывал изображение.
  • С background-position вы можно переместить изображение, чтобы сделать его лучше выровнен по тексту.
  • Если изображение выше текста padding-top и padding-bottom можно использовать для настроить внешний вид.

Эту технику также можно использовать с CSS-спрайтами следующим образом: 

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

Я использовал похожую технику, чтобы использовать CSS-спрайты вместо обычных встроенных изображений: 

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

Надеюсь, это поможет кому-то

1
ответ дан 17 December 2019 в 02:24
поделиться 
<a href="#" style="text-decoration:none;">
     <span style="text-decoration:underline;">one</span>  
    two
    <img src="img.png" style="border:0px; text-decoration:none;"> three
</a>

Я думаю, что это возможно только при использовании javascript следующим образом.

ПОСМОТРИТЕ СЛЕДУЮЩИЙ ПРИМЕР

<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>

P.S. Я хотел бы знать, возможно ли это только с помощью css и html

2
ответ дан 17 December 2019 в 02:24
поделиться 
a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }
3
ответ дан 17 December 2019 в 02:24
поделиться