当前位置：文江博客话题详情

仅使用 CSS，是否可以触发元素下方的 :hover 和 click 事件？

发布于 2024-08-29 13:34:55 字数 136 浏览 6 评论 0原文

我有一个半透明的 PNG 作为 div 的背景图像，我将其放置在一些链接上。结果，链接不可点击。有没有办法可以将鼠标悬停并单击“穿过”顶部的 div？（顺便说一句，为了定位到前景 div，我使用绝对定位和 z-index。）

谢谢！麦克风

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅紫色的梦幻 2024-09-05 13:34:55

为什么不将图像放在背景中（你知道，就像他们为此构建的背景图像属性）？做到这一点的唯一方法是使用一些非常高级的脚本，这会减慢你的页面速度，不值得。您不应该在链接上放置图像。

回复收藏 0 原文

茶花眉 2024-09-05 13:34:55

一种选择是使用 :hover 将链接标签的 z-index 移至 PNG 上方。

div.container .links {
  z-index:0;
}

div.container .background {
  z-index:1;
}

div.container:hover .links {
  z-index:2;
}

我还没有测试过这个，但我想当容器没有悬停时，它会有阴影后面的链接，但当容器悬停时，它会拉动阴影前面的链接。

One option would be to use :hover to bring the z-index of the link tags forward above the PNG.

div.container .links {
  z-index:0;
}

div.container .background {
  z-index:1;
}

div.container:hover .links {
  z-index:2;
}

I haven't tested this but I imagine it will have the links behind the shadow when the container isn't hovering but will pull the links before the shadow when the container is hovering.

回复收藏 0 原文

可是我不能没有你 2024-09-05 13:34:55

首先，没有任何理由不能将前景透明度放在链接本身内，从而避免不可点击的问题。让我们举一个简单的例子：

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /></a>

有了新层，就变成了：（

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span></a>

我添加了类名以帮助编码说明。）

然后，覆盖层将被设计样式并绝对定位在原始链接内容之上。覆盖代码块是内联的，并位于后台代码块之后，因此它会自然地分层在先前的代码之上，而无需额外的编码。

首先要做的是将一些格式化属性应用于锚点，以保持锚点内联，但接受内部绝对定位元素。（-moz- 命令用于支持 FireFox 2。）

.layered_button {
    display: -moz-inline-block;
    display: inline-block;
}

然后将装饰性半透明层放置在按钮上。

.button_overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: XXpx;
    height: XXpx;
    background: url('xxxx.png') no-repeat 0px 0px;
    _background-image: none;
}

_background: 属性是一种破解方法，用于在 Internet Explorer 6 版本上删除显示的半透明图像，因为该浏览器对透明 PNG 图像的支持存在固有问题。如果替代图像可用于 IE6 显示，则也可以替换常规 GIF 图像。

您应该做的另一件事是确保链接中的所有内容都提供正确的光标交互。（某些浏览器，尤其是某些 Internet Explorer 版本，不为链接内的标记提供预期的光标更改。）

a:hover * {
    cursor: pointer;
}

第二个选择可能是使用 JavaScript 库来提供基本 HTML 之外的事件处理。我建议使用 JavaScript 库的原因是大多数浏览器仍然不能正确支持 CSS 版本 2 方法，在这些方法中您可以将伪类 :hover 应用于除锚点之外的 DOM 元素。目前获得这种支持的最佳方法是使用库。

添加此悬停属性可以很简单

$("#button_block .layer_object").hover( // div layer hover action
    function(){ }, // MouseOver
    function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
    function(){ window.location = $("#button_block .layered_button").attr("href"); }
);

：

$("#button_block .layer_object").click( // div click = anchor click
    function(){ $("#button_block .layered_button").click(); }
);

我特别喜欢 jQuery ， ID为button_block的包装器，.layer_object是放置在链接上的独立div。]

First, there shouldn't be any reason why you could not put the foreground transparency within the link itself, and thereby avoid the un-clickable problem. Let's take a simple example:

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /></a>

With the new layer this then becomes:

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span></a>

(I've added class names to aid with coding illustration.)

The overlay would then be styled and positioned absolutely above the original link content. The overlay code piece is inline and follows the piece that belongs in the background, therefore it will naturally get layered above the prior code without extra coding.

The first thing to do is to apply some formatting properties to the anchor to keep the anchor inline but accept internal absolute-positioned elements. (The -moz- command is to support FireFox 2.)

.layered_button {
    display: -moz-inline-block;
    display: inline-block;
}

Then position your decorative semi-transparent layer over the button.

.button_overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: XXpx;
    height: XXpx;
    background: url('xxxx.png') no-repeat 0px 0px;
    _background-image: none;
}

The _background: property is a hack to remove the semi-transparent image from display on Internet Explorer 6 versions since there is an inherent problem with this browsers support of transparent PNG images. A regular GIF image could also be substituted if an alternate image is available for IE6 display.

One additional thing you should do is make sure all the content within the link provides the proper cursor interraction. (Some browsers, especially some Internet Explorer versions, do not provide expected cursor changes for markup within links.)

a:hover * {
    cursor: pointer;
}

Your second option might be to use a JavaScript library to provide event handling beyond the basic HTML. The reason I suggest a JavaScript library is that most browsers still do not properly support CSS version 2 methods where you can apply the pseudo-class :hover to elements of the DOM other than anchors. The best way to approach this support for now is using libraries.

I particularly like jQuery and adding this hover property can be as easy as:

$("#button_block .layer_object").hover( // div layer hover action
    function(){ }, // MouseOver
    function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
    function(){ window.location = $("#button_block .layered_button").attr("href"); }
);

Alternately, you can make a click on the div layer act as a click on the link with:

$("#button_block .layer_object").click( // div click = anchor click
    function(){ $("#button_block .layered_button").click(); }
);

[The reference to #button_block is assuming the two objects reside in the same wrapper with an ID of button_block, and .layer_object is the independent div placed over the link.]

回复收藏 0 原文