基于 HTML 的 CSS 正确,使其适用于悬停图像命令

Posted

技术标签:

【中文标题】基于 HTML 的 CSS 正确,使其适用于悬停图像命令【英文标题】:CSS correct based on HTML to make it work for hover image command 【发布时间】:2016-05-01 07:59:25 【问题描述】:

我希望当鼠标悬停在食品项目的“名称”上时显示图像。不是当它超过 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" />
      </div>

这是我为显示图像所做的。它在 div.child 中工作。我希望它仅在鼠标悬停在名称上而不是价格上时才起作用。我该如何做到这一点?谢谢。

.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

【问题讨论】:

你能做一个小提琴演示吗? 【参考方案1】:
<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"  />
    </div>
    <div class="child-2">
      <span class="price"><p>$20.00</p></span>
    </div>

请将价格元素移到子类之外。

请参考我的示例小提琴:https://jsfiddle.net/nikhilvkd/osxc9qt1/

或者给我你整洁的小提琴演示。

【讨论】:

@dil 您的问题已通过我的回答解决,然后请点击“接受此答案”按钮 :)

以上是关于基于 HTML 的 CSS 正确,使其适用于悬停图像命令的主要内容,如果未能解决你的问题,请参考以下文章

悬停 IE 10/9/8 不适用于透明元素

仅适用于悬停时的边框,但不适用于背景

html 纯CSS - 悬停的缩略图

如何在悬停时在 150 毫秒内将元素旋转到 180 度?

如何使整个引导程序缩略图可点击(适用于手机和平板电脑)

HTML CSS 悬停位置未与容器对齐