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>类不是＆＃34; productx＆＃34;但＆＃34;产品＆＃34;：

.product:hover h3 {
  display: block;
}

h3是产品的孩子，而不是你试图瞄准的兄弟姐妹。

Answer 2

也许你的意思是？

＆＃13;

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

＆＃13;

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

＆＃13;

隐藏显示元素与CSS

2 个答案: