CSS基于HTML更正，使其适用于悬停图像命令

我希望当鼠标悬停在食物的“名称”上时会出现一个图像。当“名字”和“价格”都是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>

早午餐

食物

20美元

请将price元素移入子类之外

参考我的提琴样本：

---

或者给我一个简洁的提琴演示。

你能做一个提琴演示吗？@dil你的问题用我的答案解决了，然后请点击“接受这个答案”按钮：）

.food-pictures {
display:none;}

/* This works but I want it work specific over the dish: */
.child:hover img {
display: block;}

/*I want this to work instead, but it doesn't. Why?  
What's the correct path? Or how do I approach this?*/
.dish:hover img{
 display:block}

<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>
      <img id="img1" class="food" visible src="https://jsfiddle.net/img/logo.png" alt="food" />
    </div>
    <div class="child-2">
      <span class="price"><p>$20.00</p></span>
    </div>