UIWebview：如何在html链接之前放置图标，并在点击时高亮显示两者

在iOS UIWebview中，我遇到了一个问题，我需要通过图标为本地加载的html文件中的独立链接添加前缀。当我点击链接时，两者都必须突出显示。应通过将非活动版本替换为活动版本来突出显示图标。结果应该如下所示：

---

幸运的是，我找到了一个可行的解决方案：

HTML

---

这能做得更短或更好吗？赞赏您的意见和改进；-）

为什么这个问题与iOS有关？UIWebview中的行为与普通浏览器中的行为不同？当然，不同iOS版本或不同Webkit版本之间的行为也不同。此外，手指输入与鼠标输入不同。所以“悬停”的行为不同。

<a href="http://www.google.de" class="standalone-link">
  <div class="standalone_link_background">
    <div class="standalone_link_icon">
        <div class="standalone_link_text">Google</div>
    </div>
  </div>;
</a>

/* unvisited, visited, mouse over, selected link */
a, a:link, a:visited, a:hover
{
    color:                          #00f;
    -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */
    -webkit-touch-callout: none;
}

a:active
{
    color:                          #f00;
    -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */
    -webkit-touch-callout: none;
}

a.standalone-link, a.standalone-link:link, a.standalone-link:visited, a.standalone-link:hover
{
    color:                          #ffffff;
    -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */
    -webkit-touch-callout: none;
}

a.standalone-link:active
{
    color:                          #f00;
    -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */
    -webkit-touch-callout: none;
}

div.standalone_link_icon
{
    background:                     url('link_icon.png') no-repeat left;
    width:                          20pt; /* something big is okay so the arrow is not cut fro the right side */
    height:                         12pt; /* set the height of the icon */
}

div.standalone_link_icon:active
{
    background:                     url('link_icon_highlight.png') no-repeat left;
}

div.standalone_link_text
{
    margin-left:                    14pt;
    width:                          9999pt; /* Standalone links shouldn't be wider than the display width */
    float:                          left;
}

div.standalone_link_background
{
    background-color:               rgba(0, 0, 0, 0);
    clear:                          left;
}