jQuery 分页器和 :hover答案

【问题标题】：jQuery paginator and :hoverjQuery 分页器和 :hover
【发布时间】：2012-01-05 18:38:04
【问题描述】：

这是我的网站：Gutdesign

点击左侧的电视。您现在看到项目列表。一切都对我有好处，但是如何让这个橙色箭头在开始时隐藏？当用户在该区域上移动鼠标时，我想显示它们（hover 效果）。但是怎么做呢？

CSS "display: none;" 然后悬停在 "display: block;" 样式不起作用:(知道为什么吗？

【问题讨论】：

标签： jquery html css pagination

【解决方案1】：

我会选择精灵。您制作的图像底部有箭头，顶部为空白，然后使用 background-position 显示您想要的一半。

示例（我没有看到该页面，因此类名仅供参考）：

.left_arrow a {background-image:url('../img/img.png')}
.left_arrow a {background-position:0px 0px}
.left_arrow a:hover {background-position:0px -72px}

更多关于精灵的信息：http://css-tricks.com/158-css-sprites/

【讨论】：

【解决方案2】：

将opacity: 0 添加到.left_arrow 和.right_arrow，然后创建一个新规则.left_arrow:hover 和.right_arrow:hover，并将opacity: 1 添加到该规则。

// filter is used for IE8 and earlier 
.left_arrow, .right_arrow
{
    opacity: 0;
    filter: alpha(opacity = 0);
}
.left_arrow:hover, .right_arrow:hover
{
    opacity: 1;
    filter: alpha(opacity = 100);
}

【讨论】：

【解决方案3】：

类似的东西：http://jsfiddle.net/26MVV/（完整的 jQuery）？

【讨论】：