How to make entire Div section clickable

[MM]

I'm trying to figure out how to make an entire div section clickable, including when on hover

pls see http://www.hoteliyo.com and scroll down to the 4 boxes. I've only managed to get the text clickable

Is there a way to change the CSS to make the entire box clickable, or some other way in the widget?

Thks!

http://hoteliyo.com

[chrisrouse]

What are you using to create the boxes?

[MM]

Thks Chris. I'm using css and then a widget section.

CSS

#quadbox :hover {
	background-color: #F2F2F2;

}

#quadbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    display: block;
    float: left;
    height: 220px;
    list-style: none outside none;
    margin: 0 1%;
    position: relative;
    text-align: center;
    transition: all 0.1s ease-in-out 0s;
    width: 96%;

}

And the widget entry:

<div id="quadbox">
<center>
<br>
<br>
<center><i class="icon-building icon-4x" style="color:#0274BE;"></i></center>
<br>
<a href="http://hoteliyo.com/hotel-assets" style="font-size:20px;font-weight:700;color:#000000;">Hotel Assets</a>
<br>
<br>
<br>
<br>
</center>
</div>
<br>
<br>

[chrisrouse]

Two options that should work. You can either wrap the entire div in a link, or you can wrap the content of the div in the link. Right now you're only making the text the link, so you would need to expand that. When I tested it on JSFiddle, I had to remove the height value to make the hover work properly, so you may need to play around with your CSS a little bit more.

[MM]

Cheers Chris. Never seen JSFiddle, interesting.

Still figuring how to wrap a div in a link or wrap the content....

[chrisrouse]

Here you go. You can see where I moved your link to. In this example, I used <div><link>Content</link></div>

http://jsfiddle.net/56ZA6/

[MM]

Rockstar Chris - that lesson will be very useful. Cheers

[Author]

Posts