当fancybox next 和 prev 箭头显示时，如何让照片继续显示？

Question

我正在为我的照片库网站使用 fancybox jQuery 插件。 Fancybox 运行良好，然而当您将鼠标悬停在图像的左三分之一时，仅显示后退箭头（照片的左三分之一消失）；类似的事情发生在图像的右三分之一处。我怎样才能解决这个问题？似乎没有任何花哨的属性可以控制这个...

这是 jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $("#tabs").tabs();
        $(".fancybox").fancybox();
    });
</script>

...html都是这样的：

<a class="fancybox" rel="group" href="Images/Fullsize/Verticals/V_Winter_2013 02 02_1928.jpg">
    <img src="Images/Thumbnails/Verticals/V_Winter_2013 02 02_1928_th.jpg" width="144" height="216" alt="Garrapata" /></a>

我没有自定义 CSS - 唯一引用的 CSS 是：

<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../fancybox/jquery.fancybox.css" type="text/css" media="screen" />

更新

我现在无法检查它，因为 Visual Studio 正在更新（更新 2），但我在由 WebMatrix 和/或 Visual Studio（Microsoft、IOW）自动生成的 Site.css 中发现了这些潜在的罪魁祸首.

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

所以看起来 MS 正在使用带有 a:link 的 buckshot 方法并间接导致了这个问题。

另外，screen.css 有：

a:hover {
  color: #589e29;
}

所以我还不知道是哪一个（如果有的话）是问题的原因......

Answer 1

一般来说，将 CSS 声明应用于全局元素并不是一个好主意，例如

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

因为它们会影响可以由特定插件添加的所有当前和未来元素（例如您的情况下的 fancybox）。建议使用 specificity 代替：

#myWrapper a:link, #myWrapper a:visited,
#myWrapper a:active, #myWrapper a:hover {
    color: #333;
}

#myWrapper a:hover {
    background-color: #c7d1d6;
}

在您的情况下，此声明：

a:hover {
    background-color: #c7d1d6;
}

...当您将鼠标悬停在 prev/next 导航按钮时，会导致彩色背景，因为它们也是链接。

您可以做的是参考最高父容器以达到特定目的。

Answer 2

您的自定义a 和fancybox a 显示之间似乎存在CSS 规则冲突。解决此问题的最佳方法是检查您的自定义 /Content/Site.css 并替换您的

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

通过这样的方式：

.content a:link, a:visited,
a:active {
    color: #333;
}
.content a:hover {
    background-color: #c7d1d6;
}

在这里，我建议您澄清一些容器，您需要根据需要在其中显示锚点。

另一种解决方案是在 CSS 的底部编写：

.fancybox-left, .fancybox-right{
  background: none !important;
}