css riddle, can you solve it? - GoFuckYourself.com

nico-t · 11-07-2012, 04:31 AM

I've got the following css for an image class:

Code:

.special img, .special img a
{
background: none;
border: none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.special img:hover, .special img a:hover
{
background: none;
border: none;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

But the div class that's around this image class ONLY overrides the non-hovering 'background: none' and 'border: none'. The opacity of a and a:hover works, but only the background and border 'none' works when you hover.
The background and border of the parent class keeps showing when you don't hover.

I've never seen this kind of selective 'class inheritance' before.

CurrentlySober · 11-07-2012, 04:40 AM

C.S.S. = Continual Self Stimulation?

Solve it?

Easy, just cut off your hands..

HTH xxx

nico-t · 11-07-2012, 04:41 AM

CurrentlySober · 11-07-2012, 04:48 AM

Quote:

Originally Posted by nico-t

Translation?

Call it a bump ! Good luck ! Its all greek to me lol

nico-t · 11-07-2012, 06:20 AM

Got it.
It's inside a class (.post) which already had image attributes.
The reason that one was overriding the class inside that class is because i needed make it more specific. The more specific a class is, that's the one it will listen to.
So i did this

Code:

.post img.special
{
background: none;
border: none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.post img.special:hover
{
background: none;
border: none;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

img a not specified by .post so not added in codes. This works, but only when i put the class in the image html itself. When i put the images around <div class="special"> tags it doesn't work. Very weird, but it's good now.

hardy · 11-07-2012, 07:22 AM

I can help you with it, so images inside .post would behave as you want. But I have to see html code first. Hit me via icq 348215379 and we'll solve it.

gimme-website · 11-07-2012, 10:11 AM

the <div class="special"></div> approach (instead of adding the class on the img tag) should work if you add the ".post" class before the ".special img" and ".special img:hover" selectors

11-07-2012, 04:31 AM	#1
nico-t emperor of my world Join Date: Aug 2004 Location: nethalands Posts: 29,903	css riddle, can you solve it? I've got the following css for an image class: Code: .special img, .special img a { background: none; border: none; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier / } .special img:hover, .special img a:hover { background: none; border: none; opacity:1.0; filter:alpha(opacity=100); / For IE8 and earlier */ } But the div class that's around this image class ONLY overrides the non-hovering 'background: none' and 'border: none'. The opacity of a and a:hover works, but only the background and border 'none' works when you hover. The background and border of the parent class keeps showing when you don't hover. I've never seen this kind of selective 'class inheritance' before.

11-07-2012, 04:40 AM	#2
CurrentlySober Too lazy to wipe my ass Industry Role: Join Date: Aug 2002 Location: A Public Bathroom Posts: 38,609	C.S.S. = Continual Self Stimulation? Solve it? Easy, just cut off your hands.. HTH xxx __________________ My AI Handywork... My Dream Gal... XXX 👁️ 👍️ 💩

11-07-2012, 06:20 AM	#5
nico-t emperor of my world Join Date: Aug 2004 Location: nethalands Posts: 29,903	Got it. It's inside a class (.post) which already had image attributes. The reason that one was overriding the class inside that class is because i needed make it more specific. The more specific a class is, that's the one it will listen to. So i did this Code: .post img.special { background: none; border: none; opacity:0.8; filter:alpha(opacity=80); /* For IE8 and earlier / } .post img.special:hover { background: none; border: none; opacity:1.0; filter:alpha(opacity=100); / For IE8 and earlier */ } img a not specified by .post so not added in codes. This works, but only when i put the class in the image html itself. When i put the images around <div class="special"> tags it doesn't work. Very weird, but it's good now.

11-07-2012, 10:11 AM	#7
gimme-website Confirmed User Industry Role: Join Date: Jun 2008 Location: Finland Posts: 1,588	the <div class="special"></div> approach (instead of adding the class on the img tag) should work if you add the ".post" class before the ".special img" and ".special img:hover" selectors __________________ www.gimme-website.com

11-07-2012, 04:41 AM	#3
nico-t emperor of my world Join Date: Aug 2004 Location: nethalands Posts: 29,903

11-07-2012, 07:22 AM	#6
hardy Confirmed User Industry Role: Join Date: Apr 2009 Location: Lithuania Posts: 63	I can help you with it, so images inside .post would behave as you want. But I have to see html code first. Hit me via icq 348215379 and we'll solve it.