jquery - 使完整的六边形成为可点击的链接

Question

我有一个非常简单的问题，我认为对于 CSS 比我自己更高级的人来说。基本上，我正在尝试制作所有带有链接的六边形，不仅将文本作为链接，而且还有完整的六边形，我正在努力了解如何在不认真修改的情况下完成。

任何建议都会很棒！

Answer 1

好吧，你可以使用 jQuery：

$(".about").click(function(){
 window.location=$(this).find("a").attr("href"); 
 return false;
});

这将使您的“关于我们”标签可点击。

来源： http ://css-tricks.com/snippets/jquery/make-entire-div-clickable/

jsfiddle： http: //jsfiddle.net/imemine29/6AbL9/1/ 我已经使它适用于“关于我们”十六进制

Answer 2

您不需要 CSS3 或 jQuery，只需使用 HTML Map 标签。此标签允许您通过定义点的坐标来定义多个可点击区域，这些区域可以是任何形状、圆形或三角形等。

它得到广泛支持，不需要 javascript。

更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

http://www.w3schools.com/tags/tag_map.asp

一个方便的工具来帮助生成坐标在这里：http ://www.image-maps.com/

Answer 3

嗨 user2478101 将您的代码修改为此

$('div[class^=nav-]').on('click',function (e) {
   e.preventDefault();
   var target = $(this).find('a[href^="#"]').attr('href');
   // you code goes here
   });
});

E[foo^="bar"] 一个 E 元素，其 "foo" 属性值正好以字符串 "bar" 开始，更多信息请访问http://www.w3.org/TR/css3-selectors/