Question

我有一个手风琴菜单，我已经调整以满足我的需要。我最后的绊脚石是我有一张FedEx Courier的图像（见附图）我需要放在菜单上，但仍然允许用户点击它来激活（访问）手风琴菜单。图像是一个单独的图像，设置为在Photoshop中创建的所需alpha。该文件只是它的外观的快照，如果它是我想要它的方式。

如果这是可能的话，我会使用什么代码以及我将它放在哪里？如果在CSS文件中，它在哪里以及在哪些行之间？

Original full size Image file site page

Answer 1

您可以申请css：

pointer-events: none;

到链接上方的图片。

请参阅小提琴https://jsfiddle.net/4zgcrkyz/

Answer 2

如果您不需要关心IE，那么

pointer-events: none;是一个合适的解决方案。 11. More info on compatibility here。

或者，您可以使用具有兼容性IE＆gt;的elementFromPoint()。 5.5

以下技巧允许您在不使用pointer-events: none;

的情况下在封面图片下进行选择

https://jsbin.com/tuhotagize/edit?html,output

说明：

点击封面图片。
暂时隐藏封面图片。
获取鼠标坐标。
在该鼠标坐标下获取HTML元素（因此您知道封面下的内容）。
触发该HTML元素的点击事件。
再次显示封面图片。

您的问题的另一种替代解决方案是：

在PhotoShop中修剪您的图像，就像应该出现在菜单中一样。在其上使用CSS background-image属性
使用快递FedEx图像仅作为CSS背景图像显示页面正文。

只使用CSS即可获得相同的视觉效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.4;
        }

        a {
            display: block;
            width: 300px;
            height: 20px;
            background-color: greenyellow;
        }

            a:hover {
                background-color: #FF0000;
            }
    </style>
    <script>
        window.app = {
            show: function () {
                document.getElementById('cover').style.display = '';
            },
            hide: function () {
                document.getElementById('cover').style.display = 'none';
            },
            event: null,
            start: function () {
                document.getElementById('cover').addEventListener('click', function (event) {
                    this.hide();
                    this.event = event;
                    var target = document.elementFromPoint(event.pageX, event.pageY);
                    this.show();
                    target.click();
                }.bind(this));

                var links = document.querySelectorAll('a');
                for (var i = 0, len = links.length; i < len; i++) {
                    links[i].addEventListener('click', function (event) {
                        alert('click on ' + event.target.id);
                    }.bind(this));
                }

            }
        };

    </script>
</head>
<body onload="window.app.start();">
    <img id="cover" src="http://placehold.it/200x200" />
    <a id="a1">link</a>
    <a id="a2">link</a>
    <a id="a3">link</a>
    <a id="a4">link</a>
    <a id="a4">link</a>
    <a id="a6">link</a>
</body>
</html>

将.png图像部分放在（顶部）菜单上

2 个答案: