Отображение ссылки в гиперссылке

Пришли против интересной проблемы, и я в тупике.Отображение ссылки в гиперссылке

В основном на одной из наших страниц у нас есть несколько гиперссылок. Эти области не только доступны для кликов, где у них есть текст, но и весь фон, установив ссылку с display:block. Вы можете увидеть простой пример такой интерактивной области here.

В последнее время власти, которые попросили меня добавить еще одну ссылку в этой области. Внутренняя ссылка будет иметь другую цель для области, доступной клику, и будет доступна только для интерактивного текста, а остальная часть области, которую можно щелкнуть, обернется вокруг нее. Вы можете увидеть, как это будет сочетаться в этом demo (желтый бит представляет собой интерактивную часть внутренней ссылки, а красный - внешнюю ссылку). ПРИМЕЧАНИЕ: Я понимаю, что это выглядит очень грязно, но я боюсь, что это из моих рук.

По дизайну (и не зря) я не могу просто гнездо моих <a> тегов, как так:

<a href="#" class="clickable_area"> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <a class="inner_link" href="#">Yellow background and it's own link</a><br/> 
</a>

Попытка гнездо тегов, как это вызывает внешнюю ссылку, чтобы быть закрыто преждевременно в первой инстанции </a> как видно here.

Одним из решений может быть сделать внутреннюю ссылку элементом span, а затем использовать события onclick для выполнения гиперссылки через JavaScript, но я не слишком хорошо разбираюсь в этом подходе и предпочел бы избегать любых обходных решений JavaScript.

Я пробовал пару обходных решений с CSS и т. Д., Но пока что я придумал сухую. У меня такое чувство, что абсолютное позиционирование или отрицательная маргинальность могут быть ключевыми, но я никогда не был хорош ни в одном из них.

Если бы кто-нибудь мог предложить какие-либо предложения, я был бы очень благодарен.

источник

2010-11-24 irishbuzz

это не поможет, но гнездящиеся якоря, как это было бы недействительной разметка и может вызвать проблемы, далее вниз по линии. Я сомневаюсь, что это можно сделать с помощью обычных * средств, но тогда SO является домом для богов среди людей. Я также предлагаю переработать реализацию, если это возможно (т. Е. Использовать интерактивный `div`, который может легко поддерживать несколько ссылок таким образом) (но также ценим упрямство« полномочий ») – Ross 2010-11-24 22:08:01

Вы не можете вставлять ссылки. Мое предложение абсолютно позиционировать внутреннюю связь поверх внешней области, примерно так:

<div class="container" style="position:relative"> 
<a href="..."> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
</a> 
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a> 
</div>

источник

2010-11-24 22:06:18

Спасибо Diodeus.Это, безусловно, возможное решение (см. Здесь) (http://jsfiddle.net/JLpsG/). Я собираюсь оставить вопрос открытым для другого, чтобы узнать, может ли кто-нибудь найти лучший ответ, но я соглашусь, если нет. – irishbuzz 2010-11-24 22:34:51

Хорошо, это, безусловно, лучший ответ. Демонстрация в моем последнем комментарии использует «padding-bottom» на элементе с красной кнопкой, чтобы растянуть область, достаточную для перемещения внутренней ссылки. На самом деле проще просто добавить дополнительный «
» в зону, в которую можно щелкнуть, так как это также обеспечивает идеальное пространство. Еще раз спасибо Diodeus – irishbuzz 2010-11-25 10:45:41

Я хотел бы использовать DIV, чтобы обернуть ваши ссылки. Это то, что ты собираешься делать? http://jsfiddle.net/wcCMC/3/

источник

2010-11-24 22:12:22 stevelove

Это была бы нормальная ситуация, но irishbuzz выполнил следующее ПРИМЕЧАНИЕ: Я понимаю, что это выглядит очень грязно, но я боюсь, что это из моих рук. По дизайну (и не без оснований) я не могу просто вложить свои теги – Michael 2010-11-24 22:24:00

спасибо, что нашли время ответить. Я добавлю к тому, что Майкл комментирует - область с желтым щелчком может охватывать только текст второй ссылки, а красный фон должен заполнить оставшуюся комнату справа. – irishbuzz 2010-11-24 22:30:01

Вы не можете вставлять ссылки, но используйте абсолютное позиционирование.

<div id="wrapper"> 
    <a id="bigred" href="...">Big clickable area</a> 
    <a id="yellow" href="...">Yellow background link</a> 
</div>

CSS

#wrapper { 
    position: relative; 
    height: 300px; 
    width: 500px; 
} 

#bigred { 
    background: #ff0000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 300px; 
    width: 500px; 
} 

#yellow { 
    background: #ffff00 
    position: absolute; 
    top: 30px; 
    left: 30px; 
}

Обе ссылки будут интерактивными. Желтый нарисован поверх красного цвета из-за порядка источника. Если вы измените заказ, вам нужно будет использовать z-index, чтобы контролировать, какие дисплеи сверху.

источник

2010-11-24 22:15:06

Держи рабочего примера:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
<style> 
a {text-decoration:none; background-color:red} 
.clickable_area{display:block;color:#000; padding-bottom: 20px;} 
.container{position: relative;} 
.inner_link{position:absolute; bottom: 0px; background-color:yellow} 
</style> 

    <div class="container"> 
     <a href="#" class="clickable_area"> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
     </a> 
     <a class="inner_link" href="#">Yellow background and it's own link</a> 
    </div> 

</body> 
</html>

источник

2010-11-24 22:17:56 Michael

Отображение ссылки в гиперссылке

ответ

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