Hover klickbare Bildbeschreibung funktioniert nicht

Ich habe ein anklickbares Bild, wenn ich den Mauszeiger anhabe. Ich möchte eine kurze Beschreibung darüber anzeigen. Ich habe versucht, eine Methode mit CSS und jQuery, aber es scheint wie es glänzt, wenn ich schweben, anstatt in einem stationären Zustand (statisch) bleiben.Hover klickbare Bildbeschreibung funktioniert nicht

HTML

<a href="#" class="project"> 
    <img src="images/valencia.png"/> 
</a> 
<a href="#" class="description"> 
    <p>In this website you find information about sport and gastronomy in Valencia. It was built for the Erasmus+ Project.</p> 
</a>

CSS

a.project img { 
    height: 150px; 
    width: 200px; 
    border-radius: 5px; 
    border: 1px solid #fff; 
} 
a.description { 
    text-decoration: none; 
} 
a.description { 
    height: 150px; 
    width: 200px; 
    background-color: white; 
    color: black; 
    border-radius: 5px; 
    opacity: 0.8; 
    position: absolute; 
    top: 0; 
    left: 90px; 
    right: 0; 
    bottom: 0; 
    visibility: hidden; 
} 
a.description p { 
    margin-top: 35px; 
}

jQuery

$('a.project img').mouseover(function(){ 
    $('a.description').css("visibility","visible"); 
}); 
$('a.project img').mouseout(function(){ 
    $('a.description').css("visibility","hidden"); 
});

Quelle

2016-07-22 Daniel B.

Bitte erarbeiten. Ich habe deinen Code in eine Geige geschrieben und der Hover-Effekt scheint genau so zu funktionieren, wie man es erwarten würde. https://jsfiddle.net/f7fqcprs/ –

Werfen Sie einen Blick darauf und sehen Sie, ob es hilft. http://stackoverflow.com/questions/16971757/how-to-display-text-over-a-faded-image-on-hover-using-jquery – Danieboy

@RobertC, gut, wie Sie sehen können, wenn Sie Ihre Maus auf bewegen das Bild, der Text glänzt, ich will es statisch. –

Dies ist ein Beispiel, das Ihnen bei der Lösung des Problems helfen könnte.

https://stackoverflow.com/a/16971934/3585278

Es ist gut, sich daran zu erinnern, dass, wenn Sie Umgang sind wie die Dinge aussehen, stehen die Chancen, es in CSS getan werden sollte (was Ihnen das Leben leichter auf lange Sicht machen wird).

Ich habe hier ein Beispiel verspottet: http://jsfiddle.net/HAcE2/

Sie müssen im Grunde ein Feld erstellen, wenn Sie erscheint schweben. Wenn Sie position: absolute verwenden, können Sie die Box über dem oberen Rand erscheinen lassen und mit CSS können wir sie erscheinen lassen, wenn wir den Mauszeiger darüber bewegen.

.wrapper { 
    position: relative; 
    padding: 0; 
    width:100px; 
    display:block; 
} 
.text { 
    position: absolute; 
    top: 0; 
    color:#f00; 
    background-color:rgba(255,255,255,0.8); 
    width: 100px; 
    height: 100px; 
    line-height:100px; 
    text-align: center; 
    z-index: 10; 
    opacity: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 
.text:hover { 
    opacity:1; 
} 
} 

img { 
    z-index:1; 
}

Quelle

2016-07-22 17:07:48 Danieboy

Ich würde versuchen, .hover statt:

$('a.project img').hover(function(){ 
    $('a.description').css("visibility","visible"); 
});

Anstatt Tests für .mouseover und .mouseout.

Quelle

2016-07-22 17:01:04 Toby

Hover klickbare Bildbeschreibung funktioniert nicht

Antwort

Verwandte Themen