I am looking to have an image appear when a mouse hovers over ONLY the "name" of the food item, and not the "price" which is part of div.child.
<div class="menu-block">
<div class ="menu-titles"><span><p class="title">Brunch</p></span></div>
<div class="meal_unit">
<div class="child">
<span class="name"> <p>Food</p></span>
<span class="price"><p>$20.00</p></span>
<img id="img1" class="food" visible src="food.jpg" alt="food"/>
</div>
I have successfully displayed the image in the div.child, but I need it to only appear when the mouse hovers over the name and not the price. How can I achieve this? Any suggestions would be appreciated. Thank you.
.food-pictures {
display:none;}
/* This code works but I want it to be specific to the dish: */
.child:hover img {
display: block;}
/*I tried the code below, but it didn't work. What am I missing in the correct path or approach?*/
.dish:hover img{
display:block}