SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: opacity

  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    opacity

    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. #2
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean something like this.

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

  4. #4
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
      
           #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. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yeah. But the inner div needs to be nested in the outer. So...

    div#outer:hover div#inner {...}

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jaynesh View Post
    Hi. Yes something along those lines. Is it possible without javascript.
    It already works without JavaScript. The JavaScript is in place for IE6 only as shown in the code by the conditional comments.

    Code:
    <!--[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

    Code:
      
           #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •