Wie mit nur CSS diese Hover-Effekt erhalten

Question

ich schon den Kreis Teil haben. Ich stelle eine Hintergrundfarbe von Schwarz auf dem Div. und für den Text setze ich einen: hover wie die gezeigte Farbe. Ich kann einfach nicht herausfinden, wie setze ich ein: schweben Sie für das Div auch nur für diesen Umfang.

Hier ist mein Code:

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; 
} 

Auch ist es eine Möglichkeit, das Hintergrundbild eines div auf schweben zu ändern?

Answer 1

Brauchen Sie so etwas?

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; 
} 

Am eine feste Breite Element mit einem transparenten Rand aufweist, so dass mein Element auf schweben bewegt sich nicht, Sie kann auch die Elemente Grenze auf die Hintergrundfarbe einstellen, und zuletzt nicht zuletzt, beim schweben, ändere ich einfach die border-farbe zu #FF4800, ich habe auch übergang beispiel hinzugefügt, wenn sie weichheit auf schweben .

---

Dennoch, wenn Sie nicht über die Elemente wollen background-color mehr 10px wegen der transparenten Grenze erstrecken, und Sie wollen nicht die border-color auf die Hintergrundfarbe passen, können Sie CSS content Eigenschaft wie folgt verwenden

Demo (content mit :after pseudo)

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

Konvertieren Sie diese zwei Bilder in ein einziges Bild und verwenden Sie CSS-Sprite-Technik, indem Sie die background-position auf Hover ändern. Das ist es.

Answer 3

Und wie für den Hintergrund ändern:

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

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

Answer 4

Sie könnte es tun mit border-radius

Demo http://jsfiddle.net/fYfwH/