Question

在这个小提琴中：http://jsfiddle.net/peey/bbseQ/1/，我试图超链接由css（using this snippet）制作的三角形，它基本上是一个元素的边框。

在小提琴中，正如您所看到的，超链接的实际区域包括第二个形状中显示的红色区域。

我正在寻找一种方法，我只能用它超链接可见区域或右边框。我认为可能有可能使用jQuery或纯JavaScript或甚至其他一些JavaScript库，但我不确定如何。

此外，HTML图像映射是否可以与元素一起使用，因为如果它们可以，我可以使用它们来定义要超链接的区域。

谢谢。

这是html代码：

<body>
I just want to link green, visible area    
<a href="#"><div class="arrow-right"></div></a>
But the actual hyperlinked area includes red:
<a href="#"><div class="arrow-right"></div></a>

<style>
.arrow-right{
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;    
    border-left: 60px solid green;
}

a:last-child .arrow-right{
    background:red;
}
*{margin:10px;}
</style>
</body>

Answer 1

你的问题很好，但为了解决它，我使用了一些数学。

假设边框的大小为60：

var v = 60;
$('a').on("click", function(event){
    var x = event.pageX - $(this).offset().left;
    var y = event.pageY - $(this).offset().top;
    if((x==y || x<y) && x<v && (x+y)<v*2) {
        console.log(x+" "+y);
    } else {
        console.log('out!');
        return false;
    }
});

用于比较的等式将计算点击事件是否在箭头内。

DEMO：http://jsfiddle.net/bbseQ/9/

更新：也适用于Firefox！干杯：）

超链接元素的不同部分（如边框）到不同的链接

1 个答案:

超链接元素的不同部分（如边框）​​到不同的链接

1 个答案:

超链接元素的不同部分（如边框）到不同的链接