0

我非常接近实现我想要的......但我想知道我是否已经达到了 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来实现呢？在这里看了一些，但没有一个真正适用于我的情况。希望我已经提供了足够的信息让你理解。干杯!

4

4 回答 4

1

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

于 2012-08-13T12:53:20.343 回答
0

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

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-13T12:44:23.763 回答
0

我拿起你的 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
}
于 2012-08-13T13:00:15.390 回答
0

将此声明添加到您的样式中

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

由于其他divs 也在slide-index容器中 -hover仍将应用效果。

于 2012-08-13T13:00:37.220 回答