antonanton antonanton - 3 months ago 6
CSS Question

hiding showing elements with css

I am trying to show and hide a text element within a list of items with a :hover function. At the moment I am using the adjacent-sibling selector and what is happening is the text element from the following div is being shown, not the one from the currently hovered element.

The css I am using:

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

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


Here is the 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>


So if I hover over the second ┬┤product┬┤ element, Title3 will appear. Any thoughts?

Answer

Assuming the <li> classes are not "productx" but "product":

.product:hover h3 {
  display: block;
}

The h3 is a child of product, not a sibling like you tried to target.

Comments