Div link and hover does not work

Question

I am building new website and I've run into a little problem. When I added <a href="about.php"> next to my div and </a> after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.

Here is HTML code:

<div id="centerbox">
    <div class="profile"></div>
        <a style="display:block" href="about.php"><div class="about"></div></a>
     </div>
</div>

And here is CSS Code

#centerbox {
    width:988px;
    height:462px;
    margin-top:8.7%;
    margin-right:auto;
    margin-left:auto;
}

.about {
    width: 150px;
    height: 150px;
    display: block;
    margin-left:15.8%;
    margin-top:-150px;
    background:url(/images/about1.png);
    background-repeat:no-repeat;
}

Please fix your HTML. You seem to have an extra closing `` tag and it is not clear what you are trying to do. Is the `a` element contained by `.profile` or adjacent (sibling) to it? — Marc Audet, Nov 24 '15 at 18:59

score 1 · Answer 1 · edited May 23 '17 at 11:59

This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.

When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.

If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.

See this post for further clarification

score 0 · Answer 2 · answered Nov 24 '15 at 18:47

0

Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)

answered Nov 24 '15 at 18:47

RyanM

751
5
20

I have different picture to a tag what i need hover – Nov 24 '15 at 18:52
Put a class in the a tag and use it in the a tags you want to hover over – RyanM Nov 24 '15 at 18:53

score 0 · Answer 3 · answered Nov 24 '15 at 20:01

0

I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">

answered Nov 24 '15 at 20:01

score -1 · Answer 4 · answered Nov 24 '15 at 18:48

-1

You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class

answered Nov 24 '15 at 18:48

pwilmot

586
2
8

Div link and hover does not work

4 Answers4