隱藏顯示元素與CSS

Question

我試圖使用：hover函數顯示和隱藏項目列表中的文本元素。 目前我正在使用相鄰兄弟選擇器，正在發生的是顯示來自以下div的文本元素，而不是當前懸停元素中的文本元素。

我正在使用的CSS：

.product h3 {
    font-weight: normal;
    position: absolute;
    top: 2em;
    left: 20px;
    display: none;
}

.product:hover + .product h3 {
    display: block;
}

這是HTML：

<ul>
<li class="product">
    <h3>Title 1</h3>
    <span class="price">price</span>
    <a href="source" class="classes"><img src="source" class="classes"></a>
</li>
<li class="product">
    <h3>Title 2</h3>
    <span class="price">price</span>
    <a href="source" class="classes"><img src="source" class="classes"></a>
</li>
<li class="produc3">
    <h3>Title 3</h3>
    <span class="price">price</span>
    <a href="source" class="classes"><img src="source" class="classes"></a>
</li>
</ul>

因此，如果我將鼠標懸停在第二個“產品”元素上，則會出現Title3。 有什么想法嗎？

Answer 1

假設<li>類不是“productx”而是“product”：

.product:hover h3 {
  display: block;
}

h3是產品的孩子，而不是你試圖瞄准的兄弟姐妹。

Answer 2

也許你的意思是？

 .product h3 { font-weight: normal; position: absolute; top: 2em; left: 20px; display: none; } .product:hover h3 { display: block; } 

 <ul> <li class="product product1"> <h3>Title 1</h3> <span class="price">price</span> <a href="source" class="classes"><img src="source" class="classes"></a> </li> <li class="product product2"> <h3>Title 2</h3> <span class="price">price</span> <a href="source" class="classes"><img src="source" class="classes"></a> </li> <li class="product product3"> <h3>Title 3</h3> <span class="price">price</span> <a href="source" class="classes"><img src="source" class="classes"></a> </li> </ul>