悬停div时，如何影响图像的不透明度？

Question

I'm so so close to acheiving what I want... but I'm wondering if I've hit the limit of what is possible with css.

If you navigate to http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49

We have a product slider. I'm trying to get it so that..

1) products start at 100% opacity on load. 2) hover over a product.. and the one you are hovering over stays at 100% opacity, the others all go to say 0.5 opacity (dim down).

I have ALMOST achieved this with css. Yo can see it working, except, when you hover over the description that pops up... the active image goes back to 0.5 opacity. Is it possible to control the opacity of this image, whilst hovering over the popup description? I really really hope so! Failing that... how might I acheive this with js? Looked at some on here, but none really apply to my situation. Hope I've given enough information for you to understand. Cheers!

Answer 1

如果将任何包含div的鼠标悬停在#containingDiv:hover img { }将会影响img，因此如果我是您，我会使用Ryan的解决方案，如果您将鼠标悬停在img上

Answer 2

This should work for the opacity on the images when the user is not hovering.

divName img {
 opacity:0.3;
 filter:alpha(opacity=30);(IE)
}

And then when they hover (this should include your product info styling to as you have that displayed when hovering.)

diveName img:hover{
 opacity:1.0;
 filter:alpha(opacity=100);(IE)
}

Also throw in an active class on start so that at least one product is being shown when the page loads

For example:

divName img .activeLoad{
 opacity:1.0;
 filter:alpha(opacity=100);(IE)
}

Answer 3

I picked up your html and put it in a fiddle. Take a look http://jsfiddle.net/hMW8N/

Anyway, this is all you basically need. I'm over specifying with these selectors, but I'm doing it so you can better understand.

#slider-list-stick-1:hover .slide-index{
    opacity: 0.5;
    filter:alpha(opacity=50); //ie
}

#slider-list-stick-1 .slide-index:hover {
    opacity: 1;
    filter:alpha(opacity=100); //ie
}

Answer 4

Add to your styles this declaration

.slide-index:hover img{
    opacity: 1;
}

As other div s are also in the slide-index container - the hover effect will still be applied.