Konvertieren eines Text-Links in ein Bild auf Hover

Ich habe eine Website mit drei Links mit Text.Konvertieren eines Text-Links in ein Bild auf Hover

Ich versuche es so zu machen, wenn ich über den Textlink schweben wird ein bestimmtes Bild angezeigt.

Ich war in der Lage, über den Text zu schwenken und die Farbe des Textes zu ändern.

Aber ich kann nicht herausfinden, wie jeder Link ein anderes Bild schweben lassen.

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

    }

Quelle

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>

Quelle

2016-05-14 17:41:52

Oh schießen, aber jetzt kann ich es nicht als Link verwenden. Hm .... –

Natürlich können Sie. Wickeln Sie einfach die 'img' in' a' Tags. https://jsfiddle.net/efmpL3t8/ –

Sie können nur CSS verwenden, um die img anzuzeigen, wenn die Eltern div des img schwebte wird. Wie so:

.flex-item img { 
    display: none; 
} 

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

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

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

Oder Sie das img innerhalb der ein Element setzen.

a img { 
    display: none; 
} 

a:hover { 
    color: white; 
} 

a:hover img { 
    display: block; 
}

Quelle

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

Quelle

2016-05-14 17:52:41 TechTho

Konvertieren eines Text-Links in ein Bild auf Hover

Antwort

Verwandte Themen