Ссылка внутри div-ссылки

Ответ 1

Это невозможно в HTML, так как элемент a внутри элемента a недопустим. По существующим спецификациям HTML у вас не может быть, например, div внутри a, но это ограничение никогда не выполнялось браузерами, и оно было снято в черновиках HTML5. Вложенные элементы a - это другая проблема, так как она создаст активную область внутри активной, и ее значение нужно будет определить, и это будет путать.

Что происходит на практике при использовании

<a href=foo>bla bla <a href=bar>inner link</a> stuff</a>

заключается в том, что он работает так, как вы хотите, за исключением того, что содержимое внешнего элемента a после того, как внутренний элемент a вообще не является ссылкой. По-видимому, браузеры не готовы обрабатывать такие конструкции. Эффективно они подразумевают закрывающий тег </a>, когда они сталкиваются с тегом <a>, когда элемент a открыт. Как и для элементов p. Как и для p.

Таким образом, внутренняя ссылка в конце ссылки будет сортировать работу. Разумеется, нет никакой гарантии, что он будет продолжать работать в будущих версиях браузеров или что он работает во всех браузерах.

Вы можете использовать два отдельных, не вложенных элемента a подряд и поместить второй визуально внутри первого, используя позиционирование CSS. Но это будет несколько сложнее. Более простой подход заключается в настройке псевдо-ссылки JavaScript:

<span onclick="document.location.href = 'foo'; return false">inner link</span>

Недостатком является то, что он не будет действовать по-ссылке, когда JavaScript отключен, а поисковые системы не будут рассматривать его как ссылку.

Ответ 2

попробуйте

 <a href="your link"><div></div></a>

или с небольшим javascript

<a href="link1">
    <div>outer  link
        <img  src="image" />
        <p onclick="window.location.href='otherlink'"> inner link</p>
    </div>another
</a>

jsfiddle

Ответ 3

Кусок торта, если вы не против использовать немного jQuery. Вы можете использовать событие 'click' в контейнере div, чтобы перевести вас в одно место, а затем использовать метод event.stopPropagation на внутренней привязной ссылке, чтобы остановить событие внешнего щелчка.

http://jsfiddle.net/timcuculic/a7p13rdy/2/

    <script>
    $(".containerdiv").click(function () {
        window.open(
          'https://www.google.com/',
          '_blank'
        );
    });

    $("a").click(function (event) {
        event.stopPropagation();
    });
</script>

Ответ 4

Существует способ сделать это без использования javascript с использованием абсолютного и относительного позиционирования. Это также сохраняет семантический код для SEO, с которым javascript изо всех сил пытается это сделать.

 .outside-container {
      width: 900px;
      margin: 0 auto;
      position: relative;
      background: #888;
      padding: 5px;
    }
 
    .overlay {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0; bottom: 0; right: 0; left: 0;
      background: white;
      opacity: 0;
    }
    
    .overlay:hover {
      opacity: .2;
    }
    
    .text-box {
      position: absolute;
      top: 5px; right: 5px;
      width: 30%;
      color: white;
      font: georgia, serif 700 14px;
    }
    
    .image-box {
      width: 68%;
    }

<div class = "outside-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/George_Berkeley_by_Jonh_Smibert.jpg" alt="george_wiki" class = "image-box">
         <a class = "overlay" href = "#div"></a>
         <div class = "text-box">
           I was considering the odd fate of those men who have in all ages, through an affectation of being distinguished from the vulgar, or some unaccountable turn of thought, pretended either to believe nothing at all, or to believe the most extravagant things in the world. This however might be borne, if their paradoxes and scepticism did not draw after them some consequences of general disadvantage to mankind. But the mischief lieth here; that when men of less leisure see them who are supposed to have spent their whole time in the pursuits of knowledge professing an entire ignorance of all things, or advancing such notions as are repugnant to plain and commonly received principles, they will be tempted to entertain suspicions concerning the most important truths, which they had hitherto held sacred and <a href = "#text">unquestionable.</a>
         </div>
       </div>