如何獲得這個懸停效果與剛CSS

Question

我已經得到了圈的一部分。我在div上設置了黑色的背景顏色。併爲文字，我設置：懸停爲顯示的顏色。我只是無法弄清楚如何爲div設置一個：懸停以及該周長的數量。

這裏是我的代碼：

HTML：

<a class="cirlink" href="http://www.somesite.com"> 
<div class="circle"> 
<h2 class="textcolor">click<br> here</h2> 
</div> 
</a> 

CSS：

.circle 
{ 
border-radius: 125px; 
width:250px; 
height:250px; 
background-color:black; 
margin:auto; 
text-align:center; 
} 

.textcolor:hover 
{ 
    transition:1s; 
    color:#FF4800; 
} 

此外，有沒有什麼辦法來改變懸停div的背景圖片？

Answer 1

你需要這樣的東西嗎？

Demo

A better looking demo

You can use a white border too

Demo with transitions

div { 
    height: 100px; 
    width: 100px; 
    border-radius: 50%; 
    border: 10px solid transparent; 
    color: #fff; 
    background: #515151; 
} 

div:hover { 
    border: 10px solid #FF4800; 
    color: #FF4800; 
} 

上午有有一個透明邊框固定寬度的元素，讓我的元素不上懸停動，你也可以將元素邊框設置爲與背景顏色相匹配，最後但是並非最不重要，我只需將邊框顏色更改爲#FF4800，我還添加了過渡示例，如果您希望在懸停時使用平滑度 。

---

不過，如果你不想要的元素background-color跨越多個10px因爲透明邊框，而你不想設置border-color相匹配的背景顏色，你可以使用CSS屬性content這樣

Demo（content與:after僞）

div { 
    height: 100px; 
    width: 100px; 
    border-radius: 50%; 
    color: #fff; 
    background: #515151; 
    text-align: center; 
    line-height: 100px; 
    font-size: 20px; 
    font-family: Arial; 
    position: relative; 
    margin: 30px; 
} 

div:hover:after { 
    border: 10px solid #FF4800; 
    color: #FF4800; 
} 

div:after { 
    content: ""; 
    display: block; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    left: -10px; 
    top: -10px; 
    border: 10px solid transparent; 
    border-radius: 50%; 
} 

Answer 2

將這兩個圖像轉換爲單個圖像，並通過更改懸停時的background-position來使用CSS sprite技術。而已。

Answer 3

至於背景變化：

div { 
background: url(image.png); 
} 

div:hover { 
background: url(hoverimage.png); 
} 

Answer 4

您可以用border-radius

演示http://jsfiddle.net/fYfwH/