html - CSSだけでこのホバー効果を得る方法

Question

ここに画像の説明を入力

円の部分はすでに持っています。divに黒の背景色を設定しました。テキストについては、表示されている色として a:hover を設定しました。a:hover を 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 の背景画像を変更する方法はありますか?

score 14 · Accepted Answer

このようなものが必要ですか？

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に設定したくない場合は、次のように CSS プロパティを使用できます。border-colorcontent

デモ（疑似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%;
}

score 0 · Accepted Answer

これらの 2 つの画像を 1 つの単一の画像に変換し、background-positionオンホバーを変更して CSS スプライトテクニックを使用します。それでおしまい。

score 0 · Accepted Answer

背景の変更については、次のとおりです。

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

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

score 0 · Accepted Answer

0

あなたはそれを行うことができますborder-radius

デモhttp://jsfiddle.net/fYfwH/

于 2013-08-27T08:19:35.820 に答える

html - CSSだけでこのホバー効果を得る方法

4 に答える 4

Related

Reference