CSS: Skip Underline в части ссылки
Вопрос
Можно ли иметь смежную ссылку, где текст обычно подчеркивается на прокат мыши, но в середине есть раздел (например, изображение) без этого подчеркивания? Это не работает:
<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>
Решение 3
Я действительно хотел иметь изображение «прикреплено» к ссылкам, не подчеркнувшись на парижке. Вот решение, которое я придумал:
<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>
- Лебь набивки для компенсации текста, чтобы он не перекрывал изображение.
- С фоновая позиция Вы можете переместить изображение, чтобы сделать его лучше, выровненное с текстом.
- Если изображение выше текста накладнаяа также надоело можно использовать для настройки внешнего вида.
Эта техника также можно использовать с Спрайты 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>
Надеюсь, это поможет кому -то
Другие советы
a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }
<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>
PS я хотел бы знать, возможно ли это с CSS и HTML
Не связан с StackOverflow