1

我的情况有点棘手，很难解释，希望我能清楚地做到这一点。

在我的网站上，我需要它，因此您单击某些内容并下载图像，但是您单击的对象必须允许:hoverpsuedo 类更改图像:hover。

我的设置方式如下：

http://jsfiddle.net/6NuTv/

如果您visibility:hidden从 HTML 中删除，图像会出现并且浏览器的下载功能变得可用。我可以选择img src=是哪个图像，但添加visibilty:hidden会禁用该download功能。

重申一下 - 我需要它，所以你将鼠标悬停在prof_wl_btn它上面，它会下载<a>的href=...图像，并且在悬停/鼠标悬停时 prof_wl_btn 会更改它的背景位置（到目前为止使用 psuedo 类）。

可能的方法

1：使用javascript onMouseover和Z-Index，但我不能让z-index在这里工作......

2：我尝试使用 CSS 属性clip:rect(Xpx,Xpx,Xpx,Xpx);，但这会裁剪所有内容。

如果不清楚，对不起，这很难解释！我找不到任何其他类似的帖子。

4

2 回答 2

1

好的重写，因为OP在评论中澄清了。

您可以让背景图像在 :hover 上移动，或者如果图像必须在 HTML 中，那么您确实可以将其移动到其父级的 :hover 上，但如果您希望 alt 文本始终显示不会在此处发生.

<a href="downloadlink"><img src="someiImg" alt="Download ze image, yes"></a>

制作一张显示两种状态（正常/悬停）的大图像（someImg）。它们可以是上下或左右。我喜欢从上到下。假设您要显示的图像是 w 40px x h 40px。您的新精灵图像显示两种状态，如果是上下，将是 w 40px x h 80px；

  • 将锚设置为块上下文（显示：块、浮动等）。
  • 将锚点的高度和宽度设置为您希望查看者看到的图像数量（因此在这种情况下，锚点的宽度和高度为 40 像素）。
  • 将锚设置为溢出隐藏。现在您应该只看到您希望用户在执行任何操作之前看到的图像的 40 x 40 部分。

您现在可以将锚点设置为 position:relative 并将 img 设置为 position: absolute，或者保留它们并使用负边距（您还必须在块上下文中创建 img 才能执行此操作）。假设你做后者：

一个img {显示：块；}

a:hover img, a:focus img { margin-top: -40px; }

因为锚点已经隐藏了溢出，你仍然只能看到一个 40 x 40 的图像窗口，但现在你看到了底部。作为奖励，您也可以在那里使用键盘。

如果要使用定位，您需要相对定位锚点，绝对定位 img，将正常状态下的图像设置为顶部：0 和左侧：0，并在图像的悬停/焦点上设置顶部：-40px ;

于 2013-08-19T18:41:02.440 回答
0

我仍然不完全确定你的意思，但我认为你正在尝试这样做

a img {visibility: hidden;}
a:hover img {visibility: visible;}

但我认为最好的方法是将链接的背景图像设置为图像，然后在悬停时更改背景图像。

于 2013-08-19T18:38:35.710 回答