如何在超链接中跳过一个单词?
想象一下一个随机有序的单词序列:
... Word 1 Word 2 Word3 ...
如何才能让1统一(即不是两个单独的链接)超链接 on Word 1 & Word 3
即:当一个人悬停在Word 1或Word 3上时,观众会立即注意到超链接将导致一个页面,该页面涵盖了这两个单词的含义(无论a:hover的CSS在特定文档中是什么,都可以看到)。
其结果将是:
Word 1 Word3 ... Word 2 ...
重要的注意事项:但是,与其有两个单独的(在本例中是粗体格式的超链接),它们将是统一的为一个单一的超链接。再次:例如,通过在Word 1和Word 3上同时包含text-decoraiton:underline,可以在CSS中可视化。
可选:
最好也可以添加一个第二,其他超链接到Word 2。
用例示例:
在句子中:
“这不需要任何开放的
(Word 1)膀胱(Word 2)手术(Word 3)。”
如果1能在Word 1和Word3上统一超链接,那就太好了。这个例子澄清了跳过这个词的超级链接的用处:Word 2当然不应该包含在第一个统一链接中,因为膀胱维基百科汉与开放的手术没有多大关系-维基百科。
其结果将是:
“这不需要任何打开膀胱外科手术。”
关键问题:相反,、open、和上的超链接应该是,将统一为一个超链接。
可选:
最好也可以添加一个第二,其他超链接到Word 2。
“这不需要任何打开 膀胱 外科手术。”
以上的重要评论,也适用于此。
发布于 2015-02-08 14:29:15
如果这是你想要达到的目标,那么:
Html:
<a href="http://www.wikipedia.org">
<span class="d">Link 1</span>
<span class="b">Link 2</span>
<span class="d">Link 1</span>
<span class="b">Link 2</span>
<span class="d">Link 1</span>
<span class="b">Link 2</span>
</a>Css
a {
text-decoration:none;
}
.d {
color:blue;
text-decoration:underline;
}
.d.fake-hover {
background:blue;
color:#fff;
text-decoration:none;
}
.b {
color:darkRed;
text-decoration:underline;
}
.b.fake-hover {
background:darkRed;
color:#fff;
text-decoration:none;
}Javascript:
var elems = document.getElementsByClassName('d');
var otherElems = document.getElementsByClassName('b');
var allElems = document.getElementsByTagName('span');
var _href = 'http://stackoverflow.com';
function fakeIt(what, el) {
var els = (el.classList.contains('d')) ? elems : otherElems;
for (var i = 0, x = els.length; i < x; i++) {
(what == 'hover') ? els[i].classList.add('fake-hover') : els[i].classList.remove('fake-hover');
}
}
function addCustomLink(e) {
e.preventDefault();
location.href = _href;
}
for (var i = 0, x = allElems.length; i < x; i++) {
var el = allElems[i];
el.addEventListener('mouseover', function(e) {
fakeIt('hover', e.target);
});
el.addEventListener('mouseout', function(e) {
fakeIt('out', e.target);
});
if (el.className == 'b') {
el.addEventListener('click', function(e) {
addCustomLink(e);
});
}
};显然,在jsFiddle中,我不能使用document.location.href,所以您必须手动编辑addCustomLink函数。
小提琴在这里
https://stackoverflow.com/questions/28392538
复制相似问题