懸停可點擊圖片說明不起作用

懸停時我有一個可點擊的圖片我想顯示關於它的簡短說明。我有一個嘗試使用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"); 
});

來源

2016-07-22 Daniel B.

請詳細說明。我已經將你的代碼發佈到小提琴中，懸停效果似乎正如人們所期望的那樣工作。 https://jsfiddle.net/f7fqcprs/ –

看看這個，看看它是否有幫助。 http://stackoverflow.com/questions/16971757/how-to-display-text-over-a-faded-image-on-hover-using-jquery – Danieboy

@RobertC，以及你可以看到當你移動你的鼠標圖像，文字閃爍，我希望它是靜態的。 –

這是一個可能幫助您解決問題的示例。

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

來源

2016-07-22 17:07:48 Danieboy

我會嘗試.hover而不是：

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

，而不是測試爲.mouseover和.mouseout。

來源

2016-07-22 17:01:04 Toby

懸停可點擊圖片說明不起作用

回答

相關問題