只顯示懸停的職位標題

嗨我建立一個wordpress根據我的客戶的要求我需要顯示帖子特色圖像只有當懸停在職位的標題。到目前爲止，我試圖通過這種簡單的CSS這樣做只顯示懸停的職位標題

li.wpp-thumbnail wpp_cached_thumb wpp_featured 
{ 
    display:none; 
} 

li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured 
{ 
    display:block; 
}

但這並沒有成爲竅門，你可以幫助我通過任何其他過程，以提前感謝實現這一點。

來源

2015-02-23 dh47

「.wpp-thumbnail wpp_cached_thumb wpp_featured」這是一個單一的類名嗎？ – PRAH 2015-02-23 06:02:15

是的，它屬於單一類 – dh47 2015-02-23 06:54:23

如果您試圖更改其他元素li.wpp-post-title:hover的事件中的一個元素wpp-thumbnail的屬性，我認爲您必須使用Javascript。

您應該將onmouseover="OnMouseIn"附加到li.wpp-post-title元素並在java腳本文件中編寫一個函數來處理該問題。例如：

這樣做會被設置縮略圖作爲標題的圖像的背景，使用填充對齊，然後懸停顯示它的CSS方式。與爲懸停上的導航項目設置不同背景相同。

來源

2015-02-23 06:02:31 bidhan

在你的CSS中似乎有幾個點遺漏，很難看到沒有提供HTML時的邏輯。但是，用CSS實現這一點並不困難。只要確保特色圖片包含在標題框架中即可。

例，以下你的CSS：

--- HTML ---

<li class="wpp-post-title"> 
    <h3>title</h3> 
    <img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" /> 
</li>

--- CSS ---

.wpp-post-title .wpp_featured { 
    display:none; 
} 

.wpp-post-title:hover .wpp_featured { 
    display:block; 
}

注：

雖然可以，但不建議添加li。
同樣，您不需要添加特色圖像的所有類。一個就足夠了。
如果因爲其他原因需要添加所有類，則需要在中間添加點而不是空格。

的話，那麼CSS看起來如下：

.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured { 
    display:none; 
} 

.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured { 
    display:block; 
}

我希望幫助。 GL！

來源

2015-02-23 07:50:02 ECO13

只顯示懸停的職位標題

回答

相關問題