0

我正在为我的照片库网站使用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），但我在 Site.css 中发现了这些潜在的罪魁祸首，它是由 WebMatrix 和/或 Visual Studio（Microsoft，IOW）自动生成的。

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

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

4

2 回答 2

1

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

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

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

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

#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因为它们也是链接。

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

于 2013-05-02T18:00:20.200 回答
1

看起来您的自定义a和花式框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;
}
于 2013-05-01T19:46:54.683 回答