UIWebview:如何在html链接之前放置一个图标并突出显示两者

时间:2015-06-03 08:14:36

标签: html ios css objective-c uiwebview

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

link prefixed by arrow icon

1 个答案:

答案 0 :(得分:0)

幸运的是我找到了一个有效的解决方案:

HTML

<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>

CSS

/* 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;
}

这可以缩短或以某种方式更好吗?赞赏的评论和改进; - )