我想更改 li 類的 CSS，同時將鼠標懸停在類上。我的網站是hoomi.nl。具體頁面為： https: //hoomi.nl/producten/。當有人將鼠標懸停在產品圖像/產品框上方時，應該會彈出“meer informie”按鈕?，F在，僅當您將鼠標懸停在產品框的中心時，該按鈕才會出現。我怎么能這么做呢？我已經創建了自定義 css 來向上移動按鈕并更改顏色，以使其在您不將鼠標懸停在其上時不可見，而當您將鼠標懸停在其上時，背景和文本將獲得顏色，以便您可以看到它。li.product .button{ font-weight: 300; font-size: 13px; color: #fff0; border-radius: 5px; background: #fff0; left: 50%; line-height: 1em; margin: 0; margin-left: -6em; margin-top: -2.5em; position: absolute; top: 50%; transition: opacity .4s cubic-bezier(.5,.25,0,1); width: 12em;} li.product .button:hover { background-color: #fff; color: #333;}
2 回答
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
您是否嘗試過使用:hoverCSS <li>，如下所示：
li.product:hover .button {
background-color: #fff;
color: #333;
}
慕仙森
TA貢獻1827條經驗 獲得超8個贊
請在您的 css 文件中添加以下 CSS：
.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product:hover .button {
display: block;
}
.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button {
display: none;
}
- 2 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消