html - 添加可见性 :Hidden effect and keep <a href> download ability

Question

我的情况有点棘手，难以解释，希望我能解释清楚。

在我的网站上我需要它，所以你点击某个东西它会下载一个图像，但你点击的对象必须允许 :hover更改图像的伪类 :hover .

我的设置如下:

http://jsfiddle.net/6NuTv/

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

重申 - 我需要它，所以你将鼠标悬停在 prof_wl_btn 上并下载 <a>的 href=...图像和悬停/鼠标悬停 prof_wl_btn 改变它的背景位置(到目前为止使用伪类)。

可能的方法

1:使用 javascript onMouseover 和 Z-Index，但我无法让 z-index 在这里工作...

2:我尝试使用 CSS 属性 clip:rect(Xpx,Xpx,Xpx,Xpx);但这会影响一切。

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

Answer 1

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

你可以有一个在 :hover 上移动的背景图像，或者如果图像必须在 HTML 中，那么你确实可以在其父级的 :hover 上移动它，但如果你想要 alt始终显示不会在此处发生的文本。

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

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

• 将 anchor 设置为 block 上下文(显示: block 、 float 等)。
• 将 anchor 的高度和宽度设置为您希望观众看到的图像数量(因此在本例中， anchor 的宽度和高度为 40 像素)。
• 将 anchor 设置为溢出隐藏。现在，您应该只能看到您希望用户在执行任何操作之前看到的图像的 40 x 40 部分。

您现在可以将 anchor 设置为 position:relative 并将 img 设置为 position: absolute，或者保留它们并使用负边距(您必须使 img 也在 block 上下文中才能执行此操作)。假设您执行后者:

一张图片{ 显示: block ；

a:hover img, a:focus img { 边距顶部:-40px；

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

如果你想使用定位，你会相对定位 anchor ，绝对定位img，将正常状态下的图像设置为top:0和left:0，并将图像悬停/聚焦设置为顶部: -40px;