CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
CuriousDev
CuriousDev

Reputation: 1275

Anchor inside a UL LI breaks functionality

I am using a hover library to create an animation when the user hovers over a <li>

Here's a sample:

<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>

Here's the working fiddle - http://jsfiddle.net/95Lsafhe/

All is well up till here.

However as soon as I add an anchor below the <span>, everything goes for a toss.

<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/

I am not sure what is breaking the functionality? I just want to display anchor buttons below the span when the use hovers on a <li>.

Update: From the comments, I have learned that an anchor cannot be nested within another. I want an anchor directly below the span. However I am OK if the outer anchor is deleted/removed. Can you tell me how to change my css/code to make this happen. The span and button have to visible only on hover.

Upvotes: 2

Views: 265

Answers (2)

codefreaK
codefreaK

Reputation: 3662

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

Just bring the anchor tag below the intial one 

<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:-

Work Around you can use span inside the div and emulate the function of anchor tag by firing a click event and inside it use jQuery.get() Method to make HTTP GET Request

Demo with Anchor tag emulated with span

Upvotes: 2

d-xter
d-xter

Reputation: 56

Nested <a> are illegal so you can change <a> to <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>

Upvotes: 0

Related Questions