Opacity

HTML & CSS
1

Hello

Is it possible to apply an opacity to everything within a div?

I want to have the opacity at 100% when the mouse is over it and at 50% when the mouse is not over it.

2

Hi,

Do you mean something like this.

Just view source to see how it works (it’s a little complicated mind you).

3

Just discovered ‘opacity:’

Now I would like to now how to achieve this:

If I have two divs both with opacity and hover.
How would I make it so when I hover over one div, the opacity on the other div changes.

4

Hi. Yes something along those lines. Is it possible without javascript.

Here is what I want to achieve.

I have two divs + 1 hover state div

If I hover over outer, it will activate inner.hover


  
       #outer {
width: 800px;

border-width:0px;
border-style:solid;
border-color:000;
overflow: hidden;
background-color:#fff;

}

       #inner {
           height: 40px;
width: 600px;
overflow: hidden;
}

       #inner.hover {
           height: 100px;
width: 600px;
overflow: hidden;
}
5

Yeah. But the inner div needs to be nested in the outer. So…

div#outer:hover div#inner {…}

6

It already works without JavaScript. The JavaScript is in place for IE6 only as shown in the code by the conditional comments.


<!--[if lt IE 7]>

That means if less than IE7 only then use this code (effectively ie6 and below).

IE6 only understands hover on anchors so you can’t have div hover effects as in my demo unless you provide ie6 with a little help.

Here is what I want to achieve.

I have two divs + 1 hover state div

If I hover over outer, it will activate inner.hover


  
       #outer {
width: 800px;

border-width:0px;
border-style:solid;
border-color:000;
overflow: hidden;
background-color:#fff;

}

       #inner {
           height: 40px;
width: 600px;
overflow: hidden;
}

       #inner.hover {
           height: 100px;
width: 600px;
overflow: hidden;
}

That doesn’t really tell me anything (without html) as it seem you have just one div that increases in size when hovered. If as Eric said the div is nested then Eric’s code will apply the affect to the inner element when the outer is hovered. It won’t work in IE6 though.

If you need something more sophisticated then study the code in my example as it has all the ingredients that you need to achieve this.