将html链接锚点与css悬停相结合

为了进一步提高我的CSS知识，我一直在尝试这个，但我甚至不确定这是可能的。将html链接锚点与css悬停相结合

我有一个50个链接的列表，每行1个页面向下。每个链接之间有很少的垂直填充/边距。每个链接已被分配一个单独的HTML id，例如，

<a id="test" href="temp.html">blaghblagh</a>

，使来访http://example.com/temp.html#test将改变页面集中到特定的链接id。

我想要的是，当访问temp.html＃测试网址时，#test id链接锚将通过在链接周围放置填充/边距来使链接“突出”。

我一直在试图结合它与a:hover和各种东西，但无济于事。任何建议将不胜感激。

来源

2013-03-28 user2219424

关于有关'安全问题：visited' https：//开头开发商.mozilla。org/en-US/docs/CSS/Privacy_and_the_：visited_selector – Johan 2013-03-28 11:27:33

您需要使用:target伪选择：

a:target { 
    padding-left: 20px; 
    color: red; 
}

演示：http://jsfiddle.net/dfsq/QuFHp/

的：在CSS目标伪选择器相匹配时，散列一个元素的URL和id是相同的。（http://css-tricks.com/on-target/）

IE支持从8版开始如果你需要支持，你必须使用JavaScript旧的浏览器：

var hash = location.hash; 
if (hash) { 
    document.getElementById(hash.replace('#', '')).className = 'active'; 
}

来源

2013-03-28 11:28:27 dfsq

这正是我所需要的。非常感谢你的迅速回应。 – user2219424 2013-03-28 11:35:25

-1

我不认为你通常可以用CSS来做到这一点。你将不得不添加一个jQuery函数来检查是否有一个ID附加到URL上，如果是的话，添加一个类到该链接。

你在哪里出错：悬停？发布一些代码，我会更新我的答案，以获得工作。

来源

2013-03-28 11:22:41

考虑到问题的明确性，我不理解downvote。 – 2013-03-28 11:33:32

有一个:visited selector具体到锚标签：

a:visited { 
    padding:10px; /* Whichever values you wish to use. */ 
    margin:10px; 
}

来源

2013-03-28 11:22:54

虽然这与页面网址无关。这将继续构建访问过的链接，而不是1个站点（除非用户在每次页面加载后清除浏览器历史记录）。 – Curt 2013-03-28 11:24:45

哦，我明白了。这个问题没有说得很清楚。我只是假设所有访问过的链接都应该脱颖而出。 – 2013-03-28 11:27:10

你要找的选择是:visited：

a:visited { 
    padding: 5px; 
    margin: 5px; 
    /* or whatever you want, really */ 
}

来源

2013-03-28 11:23:12 Aioros

这不能用纯CSS来实现，但它是实现用Javascript/jQuery。

无耻的插件，但我wrote an article如何实现这一点，你可能会发现有用的。

http://curtistimson.co.uk/js/reading-url-hashtag-values/

if (window.location.hash){ 
     var hash = window.location.hash.substring(1); //gets id in URL 
     $("#" + hash).css("padding", "10px"); //applies padding to that element 
}

来源

2013-03-28 11:23:58 Curt

尝试。 a:visited{ color: red; }

了解更多有关Pseudo-Classes small documentation

来源

2013-03-28 11:24:53

将html链接锚点与css悬停相结合

回答

相关问题