在iOS UIWebview中我遇到了问题,我需要用一个图标为位于本地加载的html文件中的独立链接添加前缀。点击链接时,两者都必须突出显示。应通过将活动版本替换为非活动版本来突出显示该图标。结果应如下所示:
答案 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;
}
这可以缩短或以某种方式更好吗?赞赏的评论和改进; - )