将鼠标悬停在对父级没有悬停效果的子级上 [英] hover on child without hover effect on parent

问题描述

所以我有2 div 他们在对方，所以像这样

So I have 2 div's they're in each other so like this

<div class="parent">
    <div class="child"></div>
</div>

，而我想将背景 .parent 。

但是当我将鼠标悬停在 .child 上时，我希望 background

例如： http://jsfiddle.net / k3Zdt / 1 /

当我将鼠标悬停在darkblue区域时，我想要不是那么暗的蓝色区域，而不是改变到白色。

When I hover over the darkblue area I want the not-so-darkblue area to stay not-so-darkblue instead of changing to white.

我想保留这个< div> 结构。我不想要一个JavaScript解决方案（我知道JavaScript解决方案，但我想保持它纯CSS）。

I would like to keep this <div> structure. and I dont want a JavaScript solution (I know the JavaScript solution but I want to keep it pure CSS).

推荐答案

基本上你不能：如何在悬停子元素时为父元素设置样式？

但诀窍是使用兄弟元素：
http://jsfiddle.net/k3Zdt/8/

But a trick is to use a sibling element : http://jsfiddle.net/k3Zdt/8/

<div class="parent">
     <div class="sibling"></div>
     <div class="child"></div>
</div>

这篇关于将鼠标悬停在对父级没有悬停效果的子级上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！