ホバー上にテキストを表示せずに画像を表示

Question

テキストが入ったボタンを作ったので、ホバー上にテキストが消え、その場所に画像が表示されます。ここではHTMLコードは次のとおりです。

#facebook { 
 
    width: 200px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-width: 1px; 
 
    border-radius: 7px; 
 
    line-height: 50px; 
 
    display: table-cell; 
 
    transition-timing-function: ease-in-out; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    -ms-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
#facebook:hover { 
 
    width: 200px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    line-height: 50px; 
 
    background: rgba(59, 89, 152, .6); 
 
}

<a href="https://www.facebook.com"> 
 
    <div id="facebook"><span id="text">Facebook</span> 
 
    </div> 
 
</a>

だから、基本的に私はFacebookのロゴは、テキストの代わりに表示されるようにします。私は一人でやろうとしましたが失敗しました。誰でもこれがどうやってできるのか知っていますか？あなたはそのためにJavaScriptを使用することができます

Answer 1

私はあなたがa内divを使用していないお勧めします。エラーが発生する可能性があります。だから私はちょっとあなたのhtml構造を変更しました（あなたのhtml構造と同じです）。 visibility:hiddenとホバーが、あなたにも使用することができたときに

はので、私はaに直接id#facebookを設定し、それがdivのように動作する場合だけa#facebook

秒にdisplay:blockを追加し、私はテキストを非表示になってきましたopacity:0。この場合、それは重要ではありません。

:hoverに、あなたはvisibility

でopacityでtransitionを使用することはできませんが、心の中でを保つには、

（あなたが好きなURLを追加することができます） #facebook要素に background-imageを追加しました

助けてくれたら教えてください;）

#facebook { 
 
width: 200px; 
 
height: 50px; 
 
border-style: solid; 
 
border-color: white; 
 
border-width: 1px; 
 
border-radius: 7px; 
 
line-height: 50px; 
 
display: table-cell; 
 
transition-timing-function: ease-in-out; 
 
-webkit-transition: all 0.5s; 
 
-moz-transition: all 0.5s; 
 
-o-transition: all 0.5s; 
 
-ms-transition: all 0.5s; 
 

 
transition: all 0.5s; 
 
background-position:center center; 
 
} 
 

 
#facebook:hover{ 
 
width: 200px; 
 
height: 50px; 
 
border-style: solid; 
 
border-color: white; 
 
line-height: 50px; 
 
background-color: rgba(59, 89, 152, .6); 
 
background-image:url("http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico"); 
 
background-repeat:no-repeat; 
 

 
} 
 
#facebook:hover #text { 
 
    visibility:hidden; 
 
    
 
}

<a href="https://www.facebook.com" id="facebook"><span id="text">Facebook</span></a>

Answer 2

#facebook { 
 
    width: 200px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    border-width: 1px; 
 
    border-radius: 7px; 
 
    line-height: 50px; 
 
    display: table-cell; 
 
    transition-timing-function: ease-in-out; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    -ms-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
#facebook:hover { 
 
    width: 200px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    line-height: 50px; 
 
    background: rgba(59, 89, 152, .6); 
 
} 
 
#facebook span { 
 
    transition-timing-function: ease-in-out; 
 
    -webkit-transition: all 0.5s; 
 
    -moz-transition: all 0.5s; 
 
    -o-transition: all 0.5s; 
 
    -ms-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
#facebook:hover span { 
 
    color: transparent; 
 
}

<a href="https://www.facebook.com"> 
 
    <div id="facebook"><span id="text">Facebook</span> 
 
    </div> 
 
</a>

Answer 3

。

document.getElementById('facebook').onmouseover = function(){ 
    document.getElementById('facebook').innerHTML = ''; 
    document.getElementById('facebook').style.backgroundImage = 'url(pic.jpg)'; 
    document.getElementById('facebook').style.backgroundSize = 'cover'; 
}; 
document.getElementById('facebook').onmouseout = function(){ 
    document.getElementById('facebook').innerHTML = 'Facebook'; 
    document.getElementById('facebook').style.backgroundImage = 'none'; 
}; 

Answer 4

そのような何か？

https://jsfiddle.net/d04pLr6q/

#facebook { 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white; 
border-width: 1px; 
border-radius: 7px; 
line-height: 50px; 
display: table-cell; 
transition-timing-function: ease-in-out; 
-webkit-transition: all 0.5s; 
-moz-transition: all 0.5s; 
-o-transition: all 0.5s; 
-ms-transition: all 0.5s; 
transition: all 0.5s; 
background-color: rgba(59, 89, 152, 1); 
overflow:hidden; 
text-align: center; 
color:white; 
} 
a{ 
text-decoration:none; 
} 
#facebook:hover{ 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white; 
line-height: 50px; 
background-image: url(http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png); 
background-size: 100%; 
background-position: center; 
color: transparent; 
} 

あなたはどんなロゴこのFacebookのIMGを置き換えることができます。その完全ではない純粋なCSS :)

Answer 5

あなたは2ブロックのホバーCSSが必要です。下記の例を参照し、必要に応じて調整してください。

#facebook { 
 
width: 200px!important; 
 
height: 50px!important; 
 
border-style: solid; 
 
border-color: white; 
 
border-width: 1px; 
 
border-radius: 7px; 
 
line-height: 50px; 
 
display: table-cell; 
 
transition-timing-function: ease-in-out; 
 
-webkit-transition: all 0.5s; 
 
-moz-transition: all 0.5s; 
 
-o-transition: all 0.5s; 
 
-ms-transition: all 0.5s; 
 
transition: all 0.5s; 
 
position: relative; 
 
display: inline-block; 
 

 
} 
 

 

 
img { 
 
    width: auto; 
 
    height: 50px; 
 
    display: none; 
 
    
 
} 
 

 
#facebook:hover img { 
 
display: block; 
 
    height: 50px; 
 
    width: auto; 
 

 
} 
 

 
#facebook:hover #text { 
 
display: none; 
 
} 
 

 
#facebook img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<a href="https://www.facebook.com"> 
 

 
<div id="facebook"> 
 

 
<span id="text">Facebook</span> 
 

 
<img src ="http://i65.tinypic.com/2evxmqs.jpg" width="150px" height="45px" /> 
 

 
</div></a>