Make a div with image a:hover?

[Gnolen]

Hi,

I am wondering if someone could guide me in the right direction about
this. How can I make div 'one' hover? Does not need to be
clickable/link...It would be easy if the images was not there..But now
it is..

<div class="one"><im g src="img/someimage.gif" alt="" /><a
href="index.php ">Text bla bla bla</a></div>

I know that I have to do something like:

..one a {
display: block;
width: 200px;
height: 40px;
background-color: #f1f1f1;
padding: 5px;
}

..one a:hover {
display: block;
width: 200px;
height: 40px;
background-color: #ccccc;
padding: 5px;
}

Anyone know how?

Greetings and thanks from Gnolen

[kaeli]

Re: Make a div with image a:hover?

In article <11_Zd.19790$d5 .149644@newsb.t elia.net>, hendrikgnolen@h otmail.com
enlightened us with...
[color=blue]
> I am wondering if someone could guide me in the right direction about
> this. How can I make div 'one' hover?[/color]

I don't think that's supported until CSS2, but don't quote me.

I know you can do this with javascript.
<div class="one" onMouseOver="so meFunction()" onMouseOut="som eOtherFunction
()">

--
--
~kaeli~
Suicide is the most sincere form of self-criticism.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

[Martin!]

Re: Make a div with image a:hover?

Gnolen wrote:[color=blue]
> Hi,
>
> I am wondering if someone could guide me in the right direction about
> this. How can I make div 'one' hover? Does not need to be
> clickable/link...It would be easy if the images was not there..But now
> it is..
>
> <div class="one"><im g src="img/someimage.gif" alt="" /><a
> href="index.php ">Text bla bla bla</a></div>
>
> I know that I have to do something like:
>
> .one a {
> display: block;
> width: 200px;
> height: 40px;
> background-color: #f1f1f1;
> padding: 5px;
> }
>
> .one a:hover {
> display: block;
> width: 200px;
> height: 40px;
> background-color: #ccccc;
> padding: 5px;
> }
>
> Anyone know how?
>
> Greetings and thanks from Gnolen[/color]


IE only supports :hover on anchors with a href.
(think Gecko supports :hover on many more elements)
make the a 'display: block' and remove the div.
of course, in the hover you only add what changes.
if you really want you can put the image in the background.

a.one {
display: block;
width: 200px;
height: 40px;
padding: 5px;
background-color: #eee;
background-image: url(img/someimage.gif);
background-repeat: no-repeat;
}

a.one:hover {
background-color: #ccc;
}

<a class="one" href="index.php ">Text bla bla bla</a>


gl
martin

[Martin!]

Re: Make a div with image a:hover?

to make sure your text will appear below to the image you can ajust the
padding

a.one {
padding: 45px 5px 5px 5px;
}

this will make your a-block 45+40+5 px high (in standard mode)
unless you add so much text that it doesnt fit, in that case IE will
stretch your a-block , and in gecko it will appear growing outside the
a-block