將鼠標懸停在描述woocommerce

Question

我已經搜索並有幾個，其中涉及到我的查詢雖然他們不是具體，也嘗試了一些插件，但似乎並沒有點擊我。

我的目標是當用戶在店鋪頁面，他們可以縮略圖，他們通過從所述產品的縮略圖抓住這些數據請參見本產品說明將鼠標懸停在。

例（無懸停）：

http://s22.postimg.org/yiedgbpep/Screen_Shot_2016_10_28_at_11_28_59.png

例2（懸停）：

http://s17.postimg.org/49v85ev67/Screen_Shot_2016_10_28_at_11_29_33.png

我不介意做的CSS自己，但這個功能側因爲我認爲它會很普遍，並且有一個插件可以用來開始它。

以上是我的主要查詢，但如果它很容易回答下一部分，這將是在每個類別下創建一個自定義類，因此它將爲每個類別設置一種顏色，但第一個問題是我的主要查詢。

我使用的是最新版本的WordPress & WooCommerce的。

再次感謝。

Answer 1

簡單

#box{ 

    width:50px; 
    height:50px; 
    background:yellow; 
} 
#box:hover { 
    background:rgba(0,0,0,0.8); 
    width:50px; 
    overflow:hidden; 
    height:50px; 
    visibility:visible; 
    cursor:pointer; 
    } 

我希望這會幫助你。這是一個簡單的例子，你必須做的。