Mouse over link only, not full div

Question

I am developing a webpage and I used HTML5 to make the entire div tag a tag. Before adding a link, the entire div will expand when I hover over it. Suddenly it only works if I hover over words and not at the box that I created. HTML looks like this (minus the actual link):

<a href="link goes here" style="text-decoration: none;"> <div class="home-tab"> home </div> </a> 

And the CSS to guide it looks something like this:

 .home-tab:hover { width: 150px; height: 45px; margin-top: 30px; border-top-left-radius: 15px; border-top-right-radius: 15px; font-family: arial; color: #FFFFFF; text-align: center; font-size: 13pt; padding-top: 25px; } 

(Note: this is not all the code in the stylesheet. I also have a beautiful color there.)

Is there something that I am missing in my CSS so that it all works on hovering, not just in words? I don’t even know what questions to ask to find out what I did here.

ETA: I tested this on three different browsers. It has the same issue for IE, Firefox, and Chrome.

ETA: CSS without attribute: hover.

 .home-tab{ width: 150px; height: 35px; margin-top: 40px; border-top-left-radius: 15px; border-top-right-radius: 15px; font-family: arial; color: #FFFFFF; text-align: center; font-size: 13pt; padding-top: 25px; } 

ETA: Okay, there is something very strange here. It seems that any elements in the far right state do not have this problem. Seriously, the forums tab and the next button in the right corner both have: hover elements and they work exactly the way I want.

Answer 1

Get rid of the whole <div> and set <a> to display: block .

In any case, you should not place block-level elements inside the <a> .

Answer 2

Seems to work well here: jsFiddle

The only thing I can think of is that the div is not the size you think so. the size and width elements that you set in your css are only active when the mouse is on a div. You should also set them in the normal non-freeze settings if you want the div to be this size. Right now, by default it is large enough to hold text. You can see this, demonstrated by the black border that I added in my example.

Here is my suggestion:

 .home-tab { /*All of the sizing code goes here to create box for div*/ } .home-tab:hover { /*anything you want changed on hover goes here*/ } 

I hope I understood your question correctly. If you need more clarification, please let me know. Good luck

Answer 3

I think you want to expand this div when you hover over this div. I wrote the code below, which will solve your problem with a hang. Here is the code you are setting up

 .home-tab{ width:150px; height:45px; margin-top:30px; color:#008080; font-family: arial; background-color: blue; transition-duration: .8s; color:white; text-align: center; font-size: 13pt; padding-top: 25px; } .home-tab:hover{ width:200px; height:60px; font-size: 16pt; transition-duration: .8s; } a{ text-decoration:none} /* optional*/ </style> 

 <a href="#"><div class="home-tab"> home </div> </a>