CSSで要素を表示していない

Question

a：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> 

私は二'product'要素の上にマウスを置くのであれば、TITLE3が表示されます。何かご意見は？あなたがターゲットにしようとしたよう

.product:hover h3 { 
    display: block; 
} 

H3製品の子、兄弟ではないです：<li>クラスを想定し

Answer 1

は「productx」ではなく「製品」はありません。

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>