Question

我如此接近于实现我想要的......但我想知道我是否达到了css可能达到的极限。

如果您导航到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实现这个？看看这里的一些，但没有一个真的适用于我的情况。希望我已经提供了足够的信息供您理解。干杯！

Answer 1

#containingDiv:hover img { }会影响img，当任何包含的div悬停在上面时我会使用它，如果我是你，Ryan的解决方案只会影响img，如果你将鼠标悬停在它上面

Answer 2

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

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

Answer 3

我拿起你的html并把它放在一个小提琴里。看看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
}

Answer 4

将此声明添加到您的样式

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

由于其他div也位于slide-index容器中，hover效果仍然会被应用。

在徘徊div时如何影响图像的不透明度？

4 个答案: