Skip to content Skip to sidebar Skip to footer
Home / Google Chrome / Html

Link Not Working On Icon In A Element

Post a Comment
I'm trying to put some links in a element, and if the tag doesn't contain anything but an icon , it's not working (a click on it just opens the &

Solution 1:

Here's my workaround:

summarya * {
  pointer-events: none;
}

This makes clicks dispatch directly on the link instead of the inner elements

Solution 2:

If I'm not mistaken your problem is when you click on <i> element it opens <details> instead of going to your link. If you write <a> inside <i> then it works.

Notice For some reasons it don't redirect from code snippet in SO. But when I copy this peace of code in a html file and test it, it works fine in chrome either.

<!doctype html><html><head><metacharset="utf-8"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"></head><body><details><summary><span>Foo</span><span><ahref="http://www.google.com">text link</a></span><span><iclass="material-icons"><ahref="http://www.google.com"style="text-decoration:none;">send</a></i></span></summary><span>Bar</span></details></body></html>

Post a Comment for "Link Not Working On Icon In A Element"