Can a div or span be an actual link?

As question or is LI the only element like this to be a linkable?

I want something thats has maybe 6 lines of text inside a div that when the div is hovered it changes background colour and or maybe is a link itself...

 

If it weren't for IE 6, you could make a whole div or whatever do something on :hover. If you want, you can use whatever: hover and make IE6 obey.

Without Js, you'd have to make an anchor around all the text. It would have to be a link which you might not want.

Something like

<div> (if needed)
<a class="box" href="somewhere over the rainbow">Here's a bunch of text etc blah blah</a>
</div>

Css:
a.box {
style stuff
}

a.box:hover {
stuff for hover
}

But if it's not a link, use Js.

 

What about hover? Can a div have a separate value for hovering? Change of background etc like opacity for an image?

 

if you set your link to display as a block you can do the same as with a div, background, border what have you

display: block;

 

Ok thanks, I'll give it a go

 

That is exactly correct, and it couldn't be easier. IE is not a problem at all.

 

The only problem is, you can't have other separate links inside that?
EG
Link1

Link2

inside a link set to 100px height, 300px width - display: block;

or can you?

 

Well it sounds to me that you don't want links within links as this is impossible and it would be silly anyway. What you want is a color change of the general area on hover, with no linking, and then multiple individual links within that. But why do you want to even change the color of the larger area, that contains the multiple links, when it's hovered over, when the larger area doesn't represent a link? So there is something more that I need to know before I can answer you because something doesn't make sense to me.

 

Yes you've got it in 1 - but I just want the are highlighted to emphasise is more, say its section "New Articles" or something like that, yes I just want an area that background changes on hover

 

Do you want it to change when any of the links inside are hovered over? Do you want the larger area to be a different color depending on which link is hovered over? Do you want the specific area around the specific link to change color also so that the larger area changes color and the area around the link you mouse over changes too? What I'm doing is to try and understand better and get you to visualize what you might be asking for, because from a usability pov, it doesn't seem to make any sense. So I apologize, but I still must not be understanding you correctly. Sorry if I'm thick.

 

Something like this should do what you're looking for I think...

<div onmouseover="this.style.backgroundColor='#e7e7e7';" onmouseout="this.style.backgroundColor='#ffffff';">test</div>

Code (markup):

 

Absolutely no problem! I would like:

1) main larger area to change bg colour when hovered
2) links maybe underlined when hovered

Thats it - the rest I can add if necessary

 

MetaTitan thanks for the input buddy but I was looking for a css way - but actually that works well too!!! Is that js?

 

Yes, onmouseover/out events are JavaScript.

 

Ok thanks for that - I may use it sometime

 

Well if you care about IE6, you'll have to use the javascript method. Firefox supports the hover psuedo class for other elements besides the <a> tag, but IE6 (and maybe 7) does not.

 

Ok so thats it? I was toying around with a div inside the <a href> it was actually working! I'm not sure yet what to use...

 

I'd like to see the code

 

I'd go with a :hover pseudo class in your css. Supporting IE6 is great and all, but in the long run, doing so only to provide small emphasis on a link is too much work IMO to support IE6 by throwing a mess of JS in there that no other browser needs.

 

Good point. I hate IE too. But suppose he's doing this at a professional level for a client? Do you think his client wants to hear people with IE tell him there's weird things about his website? Do you think his client is going to want to tell his customers not to use IE? I've heard this before, but unfortunately, it isn't acceptable for professional websites. And, if you look at the suggested javascript code, it is one very simple line using a mouseover event instead a hover psuedo class. This isn't really going to get in the way. But maybe he has figured something else out, which is why I'd like to see what he might have found out or what he's working on. He says he has something that works, and I guess he means in IE as well when he says it works. So this makes me curious.