Adding a Hyperlink inside a List Item

Question

Here's what I am doing. When a List Item is hovered over, I show the contents of the div.

<li>
    <a href="#">
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
        </div>
    </a>
</li>

This works perfectly fine and my CSS, jQuery as well as HTML structure is defined over here http://jsfiddle.net/p0zyeku8/1/

My question is I want to change my HTML structure physically (not programmatically) and bring the <a> below the <span> and make the same example work like before. That is, now when the list item is hovered, I should show the contents of the <div> this time with the <span> and two <a> one below another. Here's what I mean

<li>        
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
            <a href="#" class="btn btn-default">
            <a href="#" class="btn btn-primary">
        </div>
</li>

But my CSS and HTML is going haywire when I make this change http://jsfiddle.net/p0zyeku8/2/. How do I modify my CSS to incorporate this change.

@T.J.Crowder Point taken. Here's the revised fiddle http://jsfiddle.net/p0zyeku8/2/. If you see, the hover functionality disappears and both the buttons and the span is now 'always' visible and not on the hover. — CuriousDev, Jul 21 '15 at 12:51
To clarify or add to your question, use the "edit" link on the question rather than comments. And again: The necessary code and markup should be **in** the question, not just linked. Links rot, and people shouldn't have to go off-site to help you. Stack Snippets (the `<>` button) offer most of what fiddle does. — T.J. Crowder, Jul 21 '15 at 13:19
You **cannot** affect the div by hovering over the link inside it with CSS becauce [**there is no parent selector**](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) or a previous sibling selector. You will have to rethink or use Javascript. — Paulie_D, Jul 21 '15 at 14:04
Actually in the answer what MaximeK did is exactly what I want except for the small bugs that I have mentioned in reply to his answer. If you can help resolve those bugs, my question is solved! — CuriousDev, Jul 21 '15 at 14:18

score 0 · Accepted Answer · answered Jul 21 '15 at 13:23

0

I updated your Jsfiddle HERE all your CSS was wrong updated

.thumbs li a div instead of .thumbs li div

Is that what you need ?

answered Jul 21 '15 at 13:23

MaximeK

2,039
1
10
16

Thanks. How can I reduce the size of the buttons horizontally. Also if you move the mouse from one
to another horizontally, it leaves traces like this http://imgur.com/BNOhQpI. How can i resolve it?

CuriousDev

Jul 21 '15 at 14:10

1

Ok its a problem with your .thumbs li { margin: 5px; } just remove it. I've updated the FiddleJS [HERE](http://jsfiddle.net/p0zyeku8/6/) – MaximeK Jul 21 '15 at 17:38

1

And for your problem with the button its because of `.thumbs li a { display: block; position: relative; }` just remove it, i've updated the Fiddle [HERE](http://jsfiddle.net/p0zyeku8/7/) – MaximeK Jul 21 '15 at 17:51

awesome, one last thing. How do I place the buttons one below the another and in the center. Currently the buttons are left aligned and horizontally placed to one another. – CuriousDev Jul 22 '15 at 11:02

1

You can add this css `.thumbs li .btn-block.align-mid{ width:100px; margin:5px auto; }` and add the class css in the html : `RIGHT`. i've updated the Fiddle [HERE](http://jsfiddle.net/p0zyeku8/8/) – MaximeK Jul 22 '15 at 16:00

That worked well. Thanks. – CuriousDev Jul 22 '15 at 16:47

D.Wethmar · Answer 2 · 2015-07-21T12:45:11.010

-1

The html is broke, you forgot the ending a tag. it should be:

 <li>        
        <img src="http://placehold.it/300x250" />
        <div>
            <span>Some Description</span>
            <a href="#" class="btn btn-default"></a>
            <a href="#" class="btn btn-primary"></a>
        </div>
</li>

edited Jul 21 '15 at 12:45

answered Jul 21 '15 at 12:42

D.Wethmar

53
6

Code dumps are not *useful* answers. Say *what* you changed, and *why*. Also, that doesn't solve the problem, not least because the browser will fix the unclosed tags. – T.J. Crowder Jul 21 '15 at 12:44

Adding a Hyperlink inside a List Item

2 Answers2