Anchor внутри UL LI нарушает функциональность

Question

Я использую библиотеку парения для создания анимации, когда пользователь парит над <li>

Вот пример:

<ul id="da-thumbs" class="da-thumbs"> 
     <li> 
      <a href="#"> 
       <img src="http://placehold.it/350x150" /> 
       <div> 
        <span>My Muse by Zachary Horst</span> 
       </div> 
      </a> 
     </li> 
... 
</ul> 

Вот рабочая скрипку - http://jsfiddle.net/95Lsafhe/

Все хорошо здесь.

Однако, как только я добавляю якорь ниже <span>, все идет за броском.

<ul id="da-thumbs" class="da-thumbs"> 
     <li> 
      <a href="#"> 
       <img src="http://placehold.it/350x150" /> 
       <div> 
        <span>My Muse by Zachary Horst</span> 
        <a href="#" class="btn btn-default">Add button</a> 
       </div> 
      </a> 
     </li> 
... 
</ul> 

http://jsfiddle.net/95Lsafhe/1/

Я не уверен, что нарушает функциональность? Я просто хочу отображать кнопки привязки ниже диапазона, когда использование наводится на <li>.

Обновление: Из комментариев я узнал, что якорь не может быть вложен в другой. Я хочу, чтобы якорь находился прямо под пролетом. Однако я OK, если внешний якорь удален/удален. Можете ли вы рассказать мне, как изменить свой код/​​код, чтобы это произошло. Пролет и кнопка должны быть видны только при наведении.

Answer 1

WHat you are doing is wrong you cannot nest html anchor tag It is invalid HTML. 

So, by definition, the behaviour is undefined. 

Changed Demo

Просто принеси якорный тег ниже intial один

<a href="#"> 
      <img src="http://placehold.it/350x150" /> 
      <div> 
       <span>My Muse by Zachary Horst</span> 

      </div> 
     </a> 
<a href="#" class="btn btn-default AddAnchor">Add button</a> 

EDIT: -

Работа Вокруг вы можете использовать промежуток внутри DIV и эмулировать функция тега привязки путем запуска события щелчка и внутри него использовать jQuery.get() метод, чтобы сделать HTTP GET Request

Demo with Anchor tag emulated with span

Answer 2

Уплотненный <a> незаконны, так что вы можете изменить <a> к <button>

<a href="#"> 
      <img src="http://placehold.it/350x150" /> 
       <div> 
        <span>My Muse by Zachary Horst</span> 
        <button type="submit" class="btn btn-default">Add button</button> 
       </div> 
      </a>