Adobe Community: hover effect css

Currently Being Moderated

1. Nancy O.,

Mar 3, 2013 4:16 PM in reply to thefortunecookieguy

Report

The opacity property will make everything inside a div dim to whichever value is chosen. If you use RGBA, your text won't fade out.

#divName {

background:rgba (255,255,255,1.0) /**white, 100%**/

}

#divName:hover,

#divName:active,

#divName:focus {

background:rgba (255,255,255,0.4) /**white, 40%**/

}

Nancy O.

|

Mark as:

Currently Being Moderated

2. thefortunecookieguy,

Mar 3, 2013 5:17 PM in reply to Nancy O.

Report

nancy,

if this is my current css how should it look with the included hover code?

}
#wrapper #body #middlepage #box150trad {
float: right;
height: 50px;
width: 50px;
background-color: #06F;
margin: 2px;
padding: 2px;
text-align: center;

}

|

Mark as:

Currently Being Moderated

3. Nancy O.,

Mar 3, 2013 5:39 PM in reply to thefortunecookieguy

Report

It's still not clear to me if you want your background-color's opacity to change or the entire div.

#box150trad {

opacity: 1.0;

}

#box150trad:hover {

opacity: 0.4;

}

A link might help us better understand your requirements.

Nancy O.

|

Mark as:

Currently Being Moderated

4. thefortunecookieguy,

Mar 3, 2013 6:19 PM in reply to Nancy O.

Report

i would love to be able to post it online but i can't. here is my situation. i currently have a site up at coloredfortunecookies.com, the site was created in frontpage, i have tried to upload a new site in dreamweaver but i can't get it to post, in dreamweaver my remote server shows that my files are on their server, yet all i see is the old website. do i somehow have to clear that site off first, or should my new site just override what i currently have uploaded??? any ideas??

|

Mark as:

Currently Being Moderated

5. thefortunecookieguy,

Mar 3, 2013 7:35 PM in reply to thefortunecookieguy

Report

okay, was finally able to get the site working so i can just post my info there. if you go to my site http://www.coloredfortunecookies.com you will see to the right hand side of the page there are a series of boxes, i will eventually have quite a few boxes setup there, but when a mouse hovers over each box i would like the box to become about 40% more opaque, how do i do this?

i know that i created an external style sheet which may cause problems with you view my current code, but i think it is above in a previous post, thanks.

|

Mark as:

Currently Being Moderated

6. kennethkawamoto2,

Mar 4, 2013 9:05 AM in reply to thefortunecookieguy

Report

In your CSS you have an unclosed rule so you need to fix that (missing "}".) Then do this (additional ":link" to Nancy's) :

#box150trad:link {
opacity: 1;
}

#box150trad:hover {
opacity: 0.4;
}

--
Kenneth Kawamoto

http://www.materiaprima.co.uk/

|

Mark as:

Currently Being Moderated

7. thefortunecookieguy,

Mar 4, 2013 9:20 AM in reply to kennethkawamoto2

Report

thanks ken. i am brand spankin new at this and appreicate all the help for the new guy.

where was the missing "}" and just so i understand it correctly what should the final css code for #box150trad look like?

thanks!

|

Mark as:

Currently Being Moderated

8. kennethkawamoto2,

Mar 4, 2013 9:38 AM in reply to thefortunecookieguy

Report

From line 101 you have:

#wrapper #body #middlepage #box150trad {
      float: right;
      height: 50px;
      width: 50px;
      background-color: #06F;
      margin: 2px;
      padding: 2px;
      text-align: center;
#box150trad {

opacity: 1.0;

}

#box150trad:hover {

opacity: 0.4;

}

}

Change to:

#box150trad {
      float: right;
      height: 50px;
      width: 50px;
      background-color: #06F;
      margin: 2px;
      padding: 2px;
      text-align: center;
}

#box150trad:link {
     opacity: 1.0;
}

#box150trad:hover {
     opacity: 0.4;
}

--

Kenneth Kawamoto

http://www.materiaprima.co.uk/

|

Mark as:

Currently Being Moderated

9. thefortunecookieguy,

Mar 4, 2013 11:05 AM in reply to kennethkawamoto2

Report

great, works good in chrome, but i am also using an older version of IE, i read somewhere that in order for all browers to see it the same you needed to add some different code below the "opacity: " it was something filter:alpha (opacity=40); is this necessary?

|

Mark as:

Currently Being Moderated

10. Nancy O.,

Mar 4, 2013 11:37 AM in reply to thefortunecookieguy

Report

Older IE browsers are not standards based so they don't support many of the CSS2 and CSS3 properties. Live with it. It's not going to make or break your site.

MS Filters have nasty side effects which make text appear really awful. I prefer to avoid filters. If your customers are still using older IE, they just won't see all the great eye candy. Chances are they won't know what they're missing anyway.

Nancy O.

|

Mark as:

Currently Being Moderated

11. thefortunecookieguy,

Mar 4, 2013 11:47 AM in reply to Nancy O.

Report

makes sense, why microsoft is so not up to date on these things baffles me.

|

Mark as:

Currently Being Moderated

12. thefortunecookieguy,

Mar 5, 2013 7:40 PM in reply to kennethkawamoto2

Report

hello all. on my site i am wanting to use the hover code but just have a few questions.

the code i have right now makes the boxes go 40% opaque when they are hovered over, i am wanting to have the text in the box go bold and the color of the box go 40% opaque, i played with the code a bit but couldn't quite get it to work.

on my site www.coloredfortunecookies.com to the right hand side you will see the quick order guide, the first box is "12 cookies" when you hover over this the text goes bold, on all the other boxes the color goes opaque, how do i combine these two, the text will go bold and the box color opaque, any ideas?

|

Mark as:

Currently Being Moderated

13. Nancy O.,

Mar 6, 2013 9:45 AM in reply to thefortunecookieguy

Report

I don't care much for opacity because it dims everything including the text. I think RGBA backgrounds or a box-shadow: inset would be more effective here.

Having said that, you can add font-weight: bold to the hover rules you have now.

#trad250:hover {

opacity:0.4;

font-weight:bold;

}

Nancy O.

|

Mark as:

Dreamweaver

hover effect css

Mar 3, 2013 4:08 PM

More Like This

Bookmarked By (0)

Answers + Points = Status