ホバー上のアイコンに置き換えて

Question

hoverを超えるとiconを表示しようとしています。 数字100は消えて、代わりにという新しい背景色でiconが表示されます。可能ですか？

.bbb { 
 
text-align: center; 
 
color: green; 
 
background-color: black; 
 
} 
 

 
.bbb:hover { 
 
background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="aaa"> 
 
    <span class="bbb">100 
 
    <i class="fa fa-address-book" aria-hidden="true"></i> 
 
    </span> 
 
</div>

Answer 1

あなただけの全体のスパンを隠すことなく、テキストノードを隠すことはできませんが、偽多分フォントサイズ0を作る（とによる効果だけに0に不透明度を設定することができます）二重に安全である：

メインのdivホバー上

.bbb:hover { 
background-color: red; 
font-size: 0; 
opacity: 0; 
} 
.bbb:hover .fa-address-book { 
    /* not sure how you're hiding your icon initially but add the styles you need here to show your icon when the span is hovered */ 
    display: block; 
} 

Answer 2

あなたが見ることができます/非表示の子要素

.bbb { 
 
text-align: center; 
 
color: green; 
 
background-color: black; 
 
} 
 
.aaa { 
 
text-align: center; 
 
color: green; 
 
background-color: black; 
 
width:50px; 
 
} 
 
.img-span{ 
 
    display:none; 
 
} 
 
.aaa:hover{ 
 
background-color: red; 
 
} 
 
.aaa:hover .img-span{ 
 
display:block; 
 
} 
 
.aaa:hover .bbb { 
 
display:none; 
 
background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="aaa"><span class="bbb">100</span><span class="img-span"> <i class="fa fa-address-book" aria-hidden="true"></i></span> 
 

 
</div>

Answer 3

.bbb { 
 
text-align: center; 
 
color: green; 
 
background-color: black; 
 
} 
 
.aaa:hover .hide{displaY:none} 
 
.aaa:hover i:before{ 
 
color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="aaa"><span class="hide">100</span><span class="bbb"><i class="fa fa-address-book" aria-hidden="true"></i> 
 
</span> 
 
</div>

あなたに残り

Answer 4

を説明します。このような何かを試すことができます異なるスパンでテキストとアイコンをseperating試してみて、親要素に上記のコードをホバーを追加します。あなたは、テキストを非表示にし、コンテナの同じサイズを維持するためにmin-widthを使用するfont-size:0を適用します。

.aaa i{ 
 
    display:none; 
 
    
 
} 
 
.bbb { 
 
text-align: center; 
 
color: green; 
 
min-width:40px; 
 
display:inline-block; 
 
background-color: black; 
 
transition:0.5s; 
 
} 
 

 

 
.aaa:hover .bbb { 
 
background-color: red; 
 
font-size:0; 
 
} 
 
.aaa:hover i { 
 
    display:inline; 
 
    font-size:initial; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="aaa"><span class="bbb">100<i class="fa fa-address-book" aria-hidden="true"></i> 
 
</span> 
 
</div>

Answer 5

それが変更に大丈夫だと、この

.aaa { 
 
text-align: center; 
 
color: green; 
 
background-color: black; 
 
width: max-content; 
 
} 
 
.aaa .bbb{ 
 
    display: block; 
 
} 
 
.aaa .fa{ 
 
display : none; 
 
} 
 
.aaa:hover { 
 
background-color: red; 
 
} 
 
.aaa:hover .bbb .ccc { 
 
display: none; 
 
} 
 
.aaa:hover .fa{ 
 
display : inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="aaa"><span class="bbb"><span class="ccc">100</span><i class="fa fa-address-book" aria-hidden="true"></i> 
 
</span> 
 
</div>

Answer 6

を試してみてくださいあなたのHTML markupあなたのcoul dを以下のように試してみてください。現在でも.bbb classのように.faのparentという要素を変更する必要があります。だから、hoverのテキストを非表示にすると、child要素のスタイリングに影響しますので、タグから.faタグを取り除くことができます。したがって、これらのタグは個別に並べて並べて、計画通りにスタイリングを追加できます。あなたは100とショーのアイコンを消えたい

.aaa{ 
 
    background-color: black; 
 
    display:inline-block; 
 
    color: yellow; 
 
} 
 
.aaa > .bbb{ 
 
    transition:1s ease; 
 
} 
 
.aaa:hover{ 
 
    background:red; 
 
} 
 
.aaa:hover > .fa{ 
 
    transition:1.2s ease; 
 
} 
 
.aaa:hover > .bbb{ 
 
    margin-left:-24px; 
 
    opacity:0; 
 
} 
 
.aaa:hover > .fa{ 
 
    padding:0px 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="aaa"><span class="bbb">100</span><i class="fa fa-address-book" aria-hidden="true"></i> 
 
</div>

Answer 7

、ここではいくつかのアニメーションであなたは以下のとおりです。

.aaa { 
     background-color: black; 
     display: inline-block; 
     color: yellow; 
     transition: 1s ease; 
    } 
    .aaa>.bbb { transition: 1s ease;} 
    .aaa>.fa { 
     opacity: 0; 
     padding-right: 10px; 
     transition: 1.2s ease; 
    } 
    .aaa:hover { 
     background: red; 
     transition: 1s ease; 
    } 
    .aaa:hover>.bbb { 
     opacity: 0; 
     transition: 1s ease; 
    } 
    .aaa:hover>.fa { 
     padding-right: 10px; 
     opacity: 100; 
     transition: 1.2s ease; 
    } 

HTMLはあなたのコードと同じです。