2014-12-04 3 views
0
<a href="#" class="a-hover-underline"> 
    <div class="grid-md-2-3 background-div"></div> 

    <div class="grid-1 grid-md-1-3 content-div"> 
     <h2>some text...</h2> 
     <p>some text...</p> 
    </div> 
</a> 

Итак, у меня есть эта установка с вложенным тегом «a» ... То, что я хочу достичь, - это подчеркнуть текст при наведении на якорь. У меня есть: hover {text-decoration: underline} в моем файле стилей, но текст не подчеркивается при наведении привязки. Я попытался проверить событие hover на этом теге «a» с помощью jQuery, и он работает.Вложение тега, состояние зависания игнорируется

Любые идеи или обходные пути?

Спасибо!

+0

работает здесь: http://jsfiddle.net/webtiki/r01sq43e/ –

+0

Я думаю, что есть какая-то проблема в вашем CSS. можете ли вы опубликовать минимальные полные примеры, не решаясь самостоятельно? – Jasen

+0

Я решил проблему. Мне пришлось добавить дополнительный * в мой стиль «a». Код Sass выглядит примерно так: a { &, * {text-decoration: none; } &: hover { &, *: text-decoration: underline; } } } Я думаю, что существует проблема с вставкой вложенных элементов внутри тега 'a' (хотя по тегу html5 spec 'a' может быть вложен!), Похоже, что стили, применяемые к 'a', игнорируются. – STFUn00b

ответ

0

Просто установите оригинал без наведения, чтобы не подчеркнуть, и он должен работать.

.a-hover-underline:hover { text-decoration:underline; } 
.a-hover-underline { text-decoration:none; } 

JSFiddle - http://jsfiddle.net/d2k2t7oc/

0

see this это работает для меня. Я задаю вопрос неправильно?

a{ 
    text-decoration:none; 
} 
a:hover{ 
    text-decoration:underline; 
}