ホバークリック可能な画像の説明が機能しない

Question

ホバーオンのときにクリック可能な画像があります。簡単な説明を表示したいと思います。 私はCSSとjQueryを使って試したメソッドを持っていますが、安定した状態（静的）のままではなくホバーすると輝くようです。

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

Answer 1

これは、この問題を解決するのに役立つ例です。

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

それはあなたが物事を見てどのように処理している場合、チャンスは（長期的にはあなたの人生を容易にします）CSSで行う必要がありますされていることを覚えておくことが良いことです。

私はここに例を嘲笑しました：http://jsfiddle.net/HAcE2/

あなたは基本的にあなたが置くと表示されるボックスを作成する必要があります。 position：absoluteを使用すると、ボックスを上に表示させることができ、CSSを使用すると、上に移動したときに表示されるようになります。

.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; 
} 

Answer 2

私は.hoverをしようとするだろう代わりに：

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

よりもむしろ.mouseoverと.mouseoutをテスト。