基于 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 正确,使其适用于悬停图像命令的主要内容,如果未能解决你的问题,请参考以下文章