Question

这是我的网站：Gutdesign

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

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

Answer 1

我会选择精灵。您制作的图像底部有箭头，顶部是空白，您使用背景位置显示所需的一半。

示例（我没有看到页面，所以类名只是一个引用）：

.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/

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

Answer 3

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

jQuery分页和：悬停

3 个答案: