Text über Img Hover mit Jquery

Ich bin ein Anfänger in Codierung und ich habe bereits hier gesucht, aber ich konnte nicht wirklich eine richtige Lösung für mein Problem finden. Ich versuche, einen Text anstelle des Bildes erscheinen zu lassen, wenn ich mit der Maus über das Bild fahre. Leider jquery verwendet werden muss, ich weiß, kann es nur durch die Verwendung von CSS ...Text über Img Hover mit Jquery

Bisher getan werden, ich habe die folgende, die ich hier gefunden:

Im Kopf:

<script> 
$(function(){ 
    $('.parent').mouseenter(function(){ 
     $(this).children('.child').fadeIn(); 
    }).mouseleave(function(){ 
     $(this).children('.child').fadeOut(); 
    }); 
}); 
</script>

im Körper:

<div class='parent'> 
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/> 
<div class='child'> 
<p>Random text.</p> 
</div> 
</div>

CSS:

.parent 
{ 
    position:relative; 
} 
.child 
{ 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    background-color: black; 
    opacity: 0.5; 
    padding:10px; 

    display:none; 
}

Vielen Dank für einen einfachen Tipp oder eine Erklärung, was ich falsch mache und wie ich dieses Problem lösen kann.

Edit: Das ist mein voller Code in meiner PHP-Datei

echo " 
    <!DOCTYPE html> 
    <html lang=\"en\"> 
    <head> 
     <meta charset=\"UTF-8\"> 
     <title>Test Blog</title>  

    <script> 
$(document).ready(function() { 

     $('.gallery-item').hover(function() { 
     $(this).find('.img-title').fadeIn(300); 
     }, function() { 
     $(this).find('.img-title').fadeOut(100); 
     }); 

    }); 
    </script> 

    </head> 
    <body> 


    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script> 


    <div class=\"wrapper clearfix\"> 

     <figure class=\"gallery-item\"> 
     <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'> 
     <figcaption class=\"img-title\"> 
      <h5>Random text.</h5> 
     </figcaption> 
     </figure> 


    </div>

Und da geht es weiter mit einem Drop-Down-Menü Routing zu den anderen Seiten. Der CSS-Code ist in meiner CSS-Datei, die ich oben verlinkt habe (der Link ist korrekt, da der ganze andere CSS-Code funktioniert).

Quelle

2017-06-07 Jalui

$(document).ready(function() { 
 

 
    $('.gallery-item').hover(function() { 
 
    $(this).find('.img-title').fadeIn(300); 
 
    }, function() { 
 
    $(this).find('.img-title').fadeOut(100); 
 
    }); 
 

 
});

.gallery { 
 
    width: 25em; 
 
    margin: 2em auto; 
 
} 
 

 
.gallery-item { 
 
    height: auto; 
 
    width: 48.618784527%; 
 
    float: left; 
 
    margin-bottom: 2em; 
 
    position: relative; 
 
} 
 

 
.gallery-item:first-child { 
 
    margin-right: 2.762430939%; 
 
} 
 

 
.gallery-item img { 
 
    width: 100%; 
 
} 
 

 
.gallery-item:hover .img-title {} 
 

 
.img-title { 
 
    position: absolute; 
 
    top: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: none; 
 
    background-color: #333; 
 
} 
 

 
.img-title h5 { 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 33%; 
 
    width: 100%; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wrapper clearfix"> 
 

 
    <figure class="gallery-item"> 
 
    <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'> 
 
    <figcaption class="img-title"> 
 
     <h5>Random text.</h5> 
 
    </figcaption> 
 
    </figure> 
 

 

 

 
</div>

Quelle

2017-06-07 20:09:49

Danke, ich hatte diese Lösung schon es ist für Uni und diese Lösung wird nicht akzeptiert, da wir es mit JavaScript machen müssen – Jalui

Ich bearbeite meine Antwort, war das wonach du gesucht hast? –

Danke, ja das ist was ich suche aber wenn ich es kopiere in meine PHP-Datei kann ich nicht scheinen es zu arbeiten.Ich werde meine Post mit meinem vollständigen Code aktualisieren Ich denke, ich muss es auf eine andere Art und Weise implementieren. – Jalui

Sie müssen die Größe des Overly definieren - das habe ich mit den Positionseinstellungen unten gemacht. Außerdem habe ich die Deckkrafteinstellung gelöscht. Nicht sicher, was du sonst noch willst, aber im Grunde funktioniert es jetzt.

$(document).ready(function() { 
 
    $('.parent').mouseenter(function() { 
 
    $(this).children('.child').fadeIn(); 
 
    }).mouseleave(function() { 
 
    $(this).children('.child').fadeOut(); 
 
    }); 
 
});

.parent { 
 
    position: relative; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: black; 
 
    padding: 10px; 
 
    display: none; 
 
} 
 

 
.child p { 
 
    color: white; 
 
    text-align: center; 
 
    margin-top: 100px; 
 
    font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='parent'> 
 
    <img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' /> 
 
    <div class='child'> 
 
    <p>Random text.</p> 
 
    </div> 
 
</div>

Quelle

2017-06-07 20:02:27 Johannes

Danke. Es funktioniert, wenn ich das Snippet hier starte, aber wenn ich alles in mein PHP-Storm-Dokument kopiere, funktioniert es überhaupt nicht. Also um klar zu sein: Ich füge das erste Snippet in den Kopf meines Dokuments zwischen

Text über Img Hover mit Jquery

Antwort

Verwandte Themen