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

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

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

источник

2010-06-04 Biggles

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

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

обивка левого для взаимозачета текста, чтобы он не перекрывал изображения.
С background-position вы можете переместить изображение, чтобы оно стало лучше совпадало с текстом.
Если изображение выше, чем текст обивка-топ и обивка дна может быть использован для настроить внешний вид.

Этот метод также может быть использован с 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>

Надежда это помогает кому-то

источник

2010-07-09 12:57:19 Biggles

Обтекание текста в диапазоне, а затем добавление CSS-класса, использующего эту технику фонового спрайта, сработало для меня очень хорошо. –

<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 только

источник

2010-06-04 07:40:02 Salil

Это заставит подчеркивание быть на все время. И если я создаю специальный класс для обработки зависания, он разрушит непрерывную ссылку. – Biggles

, пожалуйста, вставьте свой код после его завершения. Я хотел бы знать, как вы справляетесь с зависанием. neways Really Good Question :) – Salil

Salil: После дальнейших испытаний я обнаружил, что это не решило мою проблему. – Biggles

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

источник

2010-06-04 08:28:25 eyelidlessness

как я могу сделать, если я хочу подчеркнуть на трех, а не на двух после зависания? – Salil

Стили: a, a: hover {text-decoration: underline; } a img, a: hover img, span.two {text-decoration: none! Important; border: 0; } и разметка: one two three – eyelidlessness

Невозможно заставить их работать. Изображение все еще подчеркнуто. – Biggles

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

ответ

Смежные вопросы