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

我非常接近实现我想要的东西...但是我想知道是否已经达到了可能与CSS的限制。如何在悬停div时影响图像的不透明度？

如果您导航到http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49

我们有一个产品滑块。我试图得到它..

1）产品开始在100％不透明负载。 2）将鼠标悬停在一个产品上，并且你正在盘旋的那个保持在100％不透明度，其他人都会说0.5不透明度（暗淡）。

我已经几乎用css实现了这一点。哟可以看到它的工作，除非当你将鼠标悬停在弹出的描述上时...活动图像返回到0.5不透明度。是否可以控制此图像的不透明度，同时将鼠标悬停在弹出的描述上？我真的很希望如此！如果没有...我怎么能用js来实现这个呢？看着这里的一些，但没有一个真正适用于我的情况。希望我已经提供了足够的信息供你理解。干杯!

来源

2012-08-13 Oliver Gibson

您可能将鼠标悬停在图像上，而不是包含图像和弹出式说明的容器。 – 2012-08-13 12:49:06

我拿起你的HTML，并把IMG它在小提琴中。看看http://jsfiddle.net/hMW8N/

无论如何，这是你基本需要的一切。我已经完成了对这些选择器的指定，但我正在做，所以你可以更好地理解。

#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 
}

来源

2012-08-13 13:00:15 banzomaikaka

是的是的！这是一个！谢谢你队友，你不知道我一直在努力多久:)我会看看这是如何工作..我有大约12行的css之前得到类似的结果:)）Excellt。谢谢。 .slide-index从哪里来的？从来没有尝试过，在我的试验和错误会话 – 2012-08-13 13:01:58

;）没问题，很高兴我帮助！ – banzomaikaka 2012-08-13 13:03:33

这应该适用于图像不透明的情况，当用户没有悬停时。

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

然后当他们徘徊（这应该包括你的产品信息造型为你徘徊时显示。）

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

也扔在一个主动类的开始，这样至少一个产品被示出当页面加载

例如：

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

来源

2012-08-13 12:44:23 ryanSrich

#containingDiv:hover img { }会影响当任何包含div的悬停，所以我会用，如果我是你，瑞安的解决方案只会影响到IMG如果你盘旋在它

来源

2012-08-13 12:53:20 Andy

嗨，感谢您的投入。我尝试了解决方案1，但它没有奏效。我认为这是因为我有一些奇怪的html设置，它不像几个div和几张图像那么简单。如果任何人都可以看看萤火虫或其他东西，并让我知道确切的代码...我已经尝试了很多，我现在都迷失了。我不知道这是否是我可怜的css，或者如果它不可能.. 它是完美的....当你把鼠标悬停在弹出式描述.....当产品图像变暗时，当它需要停留在1.0不透明度..我希望你明白。 – 2012-08-13 12:59:38

JOPLO回答时，刚刚为你排序，这只是一个改变div ID/class名称的问题。好吧，很高兴你把它分类:) – Andy 2012-08-13 13:08:25

添加到您的样式这个声明

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

至于其他div s的也在slide-index的集装箱 - hover效果仍然适用。

来源

2012-08-13 13:00:37 skip405

谢谢，另一个好的答案:) – 2012-08-13 13:05:45

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

回答

相关问题