將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懸停相結合

回答

相關問題