テキストリンクをホバー上の画像に変換する

私はテキストを含む3つのリンクを持つウェブサイトを持っています。テキストリンクをホバー上の画像に変換する

テキストリンク上にカーソルを置くと、特定の画像が表示されます。

私はマウスオーバーしてテキストの色を変更することができました。

しかし、私はどのように各リンクのホバーを別のイメージにするのか分かりません。 IMGの親のdivを推移されたときにあなただけのIMGを表示するためにCSSを使用することができます

<!DOCTYPE html> 
    <head> 
    <style> 
    /* mouse over link */ 
    a:hover { 
    color: white; 
    } 
    </style> 
    </head> 
    <body 
    <div class="flex-container"> 
    <div class="flex-item"><img src="cityscape.png"> 
    <a href="ArchitectureWork.html">arch</a></div> 
    <div class="flex-item"><a href="FineArt.html">fine art</a></div> 
    <div class="flex-item"><a href="Doodles.html">doodles</a></div> 
    </div> 
    </body> 


.flex-container { 
    /*display: -webkit-flex;*/ 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-items: center; 
    justify-content: center; 
    color: aqua; 
    align-content: center; 
    padding-left: 90px; 
    padding-right: 90px; 

    } 
.flex-item{ 
/*-webkit-flex: 1;*/ 
/* I don't get order */ 
order: 1; 
flex: 1; 
flex-basis: 20%; 
max-width: 1000px; 
min-width: 100px; 
align-self: center; 
padding-left: 10px; 
padding-right: 10px; 
padding-top: 20px; 
padding-bottom: 20px; 

    }

出典

2016-05-14 Taylor Higgins

.flex-item > img  { display: none; } 
 
.flex-item:hover > img { display: inline; } 
 
.flex-item:hover > a { display: none; } 
 
.flex-container  { display: flex; }

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
     <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""> 
 
     <a href="ArchitectureWork.html">arch</a> 
 
    </div> 
 
</div>

出典

2016-05-14 17:41:52

ああ撃つが、今私はリンクとして使用することはできません。うーん.... –

もちろんできます。単に 'img'を' a'タグで囲みます。 https://jsfiddle.net/efmpL3t8/ –

。

.flex-item img { 
    display: none; 
} 

.flex-item:hover img { 
    display: block; 
} 

.flex-item:hover a { 
    color: #FFFFFF; 
}

DEMO：https://jsfiddle.net/xbkrnrhd/1/

それとも、要素内のimgを置くことができますので、同様に。

a img { 
    display: none; 
} 

a:hover { 
    color: white; 
} 

a:hover img { 
    display: block; 
}

出典

2016-05-14 17:44:55

-1

.div-class:hover { 
    content:url("https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_facebook_box_blue.png"); 
}

出典

2016-05-14 17:52:41 TechTho

テキストリンクをホバー上の画像に変換する

答えて

関連する問題